Rajeev Pentyala – Microsoft Power Platform

Other day, In one of our Portal Web Form step, we got a requirement to validate ‘Date Of Birth’ where the value should not be  the future date.

We can achieve this by adding a custom validator using JScript and register in your ‘Web Form Step’.

Below is the JScript code snippet which you need to paste in your Web Form Step’s ‘Custom JavaScript’ control.

Note:

• In below script replace the ‘new_dateofbirth’ with your field’s schema name.
• ‘new_dateofbirth_label‘ is the label of the DOB field on your Web Form Step.

$(document).ready(function () {
try{
if (typeof (Page_Validators) == ‘undefined’) return;
// Create new DOB validator
var dobValidator = document.createElement(‘span’);
dobValidator.style.display = “none”;
dobValidator.id = “dobValidator”;
dobValidator.controltovalidate = “new_dateofbirth”;
dobValidator.errormessage = “<a href=’#new_dateofbirth_label’>Date of birth should be in past.</a>”;
dobValidator.validationGroup = “”;
dobValidator.initialvalue = “”;
dobValidator.evaluationfunction = function () {
var dobValue = $(“#new_dateofbirth”).val();
var dob=new Date(dobValue);
var today = new Date();
if (dob > today) {
return false;
}
return true;
};
// Add the dobValidator to Web Page’s validators array
Page_Validators.push(dobValidator);
// Attach event handler of the validation summary link
$(“a[href=’#new_dateofbirth_label’]”).on(“click”, function () {  scrollToAndFocus(‘new_dateofbirth_label’,’new_dateofbirth’);

});
}
catch(e)
{
alert(“Error during DOB validation  – “+e.description);
}
});

• Save the Web Form Step and test in portal.
• If you try to save DOB with future date. It shows warning in the banner as below:

• Click on the message and it will take you to the DOB control.

Refer my other article to get familiar with Portal syntax’s.

🙂