Advertisements
Home > ADX, Dynamics Portals > ADX/Dynamics Portals – Date field custom validation using JScript

ADX/Dynamics Portals – Date field custom validation using JScript

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.

DOB_Validator_1

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:

DOB_Validator_2

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

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

🙂

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: