SharePoint 2013 Date time field validation using client side rendering(CSR)

Recently one of the client has asked for validation to the date time field in a list. Published date time value should be greater than today and expiry date should be less than published date. Client wants the error message to be shown similar to the way how share point shows the error messages. Client side rendering(CSR) came to my rescue.

Using CSR the developers have more control on what to show and how to show. I dont want to go into what is CSR and also those things. If you want to find out CSR read this article CSR basics.

First we will be creating a field and add some js links to it. 

// Create a field and add the required js link.
<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">  
  
 <Field Type="Text"
   Name="DateVal"
   Description="Enter Publishing Date"
   DisplayName="Expiry Date"
   StaticName="DateVal"
   Group="JSLink Site Columns"
   Hidden="FALSE"
   Required="FALSE"
   JSLink="~layouts/MJH.JSLink/jquery-1.10.2.min.js|~layouts/datepicker.js|~layouts/MJH.JSLink/CalendarColumnRendering.js"     
   ID="{00C72E88-AFF0-4C81-B24F-570F70127ABE}">
</Field>
</Elements>

In the above i created a field of type text and added some js links to it. CalendarColumnRendering.js file contains my CSR code. The js files before are the supporting ones. Even though the field type is text we will be rendering a date time html.

 Create the required js file.

//CalendarColumnRendering.js file
(function () {
    var test = {};
    test.Templates = {};
    test.Templates.Fields = {        
        'DateVal': { 'NewForm': datePickerFieldTemplate }
    };

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(test);
})();



function datePickerFieldTemplate(ctx) {
    var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);
    var colid = formCtx.fieldSchema.Id;
    var colName = formCtx.fieldSchema.Name;
    var webUrl = formCtx.webAttributes.WebUrl;
    formCtx.registerGetValueCallback(formCtx.fieldName, returnVal.bind(null, formCtx.fieldSchema));

    var validators = new SPClientForms.ClientValidation.ValidatorSet();
    validators.RegisterValidator(new dateTimeValidator());

    formCtx.registerValidationErrorCallback(formCtx.fieldName, errorMessage);
    formCtx.registerClientValidator(formCtx.fieldName, validators);

    return renderHtml(colid, colName, webUrl);
}

function returnVal(fieldSchema) {
    var colname = fieldSchema.Name;
    var colid = fieldSchema.Id;
    var id = "#" + colname + "_" + colid + "_DateTimeFieldDateHours option:selected";
    var hrval = $(id).text();
    id = "#" + colname + "_" + colid + "_DateTimeFieldDateMinutes option:selected";
    var minval = $(id).val();
    var hrvals = hrval.split(" ");
    return $("input[id*='" + colname + "']").val() + " " + hrvals[0] + ":" + minval + " " + hrvals[1];
}


dateTimeValidator = function () {
    dateTimeValidator.prototype.Validate = function (value) {
        
            var isError = false;
            var errorMessage = "";
            var x = value.split(" ");
            var date = null;
            var time = null;
            if (x[2] == 'PM') {
                var y = x[1].split(':');
                time = (parseInt(y[0]) + 12) + ":" + y[1];
            } else {
                time = x[1];
            }

            date = x[0];

        if (date.length > 0) {
            if (new Date() > new Date(date + " " + time)) {
                isError = true;
                errorMessage = "Expiry Date should be greater than today";
            }
        } else {
            isError = true;
            errorMessage = "Expiry Date cannot be empty.";
        }

        return new SPClientForms.ClientValidation.ValidationResult(isError, errorMessage);
    };
};

function errorMessage(error) {
    $('#serror').html(error.errorMessage + '<br>').css('color', '#bf0000');
}

This is the final output which i got.

Please find link to the complete code.