Adding Date Validation In Dynamics 365 Portal

This article is about implementing custom java script validation in Dynamics 365 portal web page. We will discuss how we can show our own custom validation message to portal user.

Introduction

This article is about implementing custom JavaScript validation in a Dynamics 365 portal web page. We will discuss how we can show our own custom validation message to the portal user.

Requirement

Let’s say we have the following web page in the portal where the portal customer can enter their preferred date for an appointment. But in case the customer selects Saturday or Sunday, we need to show them our custom validation message.
custom validation message
Solution

Dynamics 365 implements a default page validator for the required fields; for example, if we will try to submit the above form without entering the preferred date, we will get the following validation error.

Validation errors

Similarly, we can use JavaScript to implement our own custom validation.  Further, we can add our own custom validator to the page like below.
  1. $(document).ready(function() {  
  2.    
  3.     //Create appointment date validator  
  4.     var appointmentdateValidator = document.createElement('span');  
  5.    
  6.     //setup validator property and associated field  
  7.     appointmentdateValidator.style.display = "none";  
  8.     appointmentdateValidator.id = "him_appointmentdateValidator";  
  9.     appointmentdateValidator.controltovalidate = "him_appointmentdate"//datetime field  
  10.     appointmentdateValidator.evaluationfunction = function() {  
  11.    
  12.         var returnValue = true//set default value as true  
  13.    
  14.         //get appointment date  
  15.         var preferredDate = $("#him_appointmentdate").val();  
  16.    
  17.         //check if date is missing  
  18.         if (preferredDate == "")  
  19.             returnValue = false//if appointment date is blank return false  
  20.    
  21.         //format date using moment  
  22.         preferredDate = moment(new Date(preferredDate), 'DD/MM/YYYY');  
  23.    
  24.         //get day from date  
  25.         var daynumber = new Date(preferredDate).getDay();  
  26.    
  27.         //validation for saturday and sunday  
  28.         if (daynumber == 0 || daynumber == 2 || daynumber == 6) {  
  29.    
  30.             //setup custom validation message  
  31.             this.errormessage = "<a href='#him_appointmentdate_label'>Preferred Date cannot be selected for Saturday or Sunday, Please select Week Day.</a>";  
  32.             returnValue = false;  
  33.         }  
  34.    
  35.         return returnValue;  
  36.    
  37.     };  
  38.     // Add the validator to the page validators array:  
  39.     Page_Validators.push(appointmentdateValidator);  
  40.    
  41.     // Wire up the click event handler of the validation summary link  
  42.     $("a[href='#him_appointmentdate_label']").on("click"function() {  
  43.         scrollToAndFocus('him_appointmentdate_label''him_appointmentdate');  
  44.     });  
  45.    
  46. });  

We can put the above code under Custom JavaScript in the Entity Form. Now, if the preferred date is missing, it will show a validation error like below.

validation error 
Similarly, we can add other data validations based on different business requirements. Stay tuned for more Dynamics 365 Portal Content!