Adding Date Validation In Dynamics 365 Portal

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.

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.

Similarly, we can use JavaScript to implement our own custom validation. Further, we can add our own custom validator to the page like below.

$(document).ready(function() { 

    // Create appointment date validator   
    var appointmentdateValidator = document.createElement('span');   
    
    // Setup validator property and associated field   
    appointmentdateValidator.style.display = "none";   
    appointmentdateValidator.id = "him_appointmentdateValidator";   
    appointmentdateValidator.controltovalidate = "him_appointmentdate"; //datetime field   
    appointmentdateValidator.evaluationfunction = function() {   

        var returnValue = true; //set default value as true   

        // Get appointment date   
        var preferredDate = $("#him_appointmentdate").val();   

        // Check if date is missing   
        if (preferredDate == "")   
            returnValue = false; //if appointment date is blank return false   

        // Format date using moment   
        preferredDate = moment(new Date(preferredDate), 'DD/MM/YYYY');   

        // Get day from date   
        var daynumber = new Date(preferredDate).getDay();   

        // Validation for Saturday and Sunday   
        if (daynumber == 0 || daynumber == 2 || daynumber == 6) {   

            // Setup custom validation message   
            this.errormessage = "<a href='#him_appointmentdate_label'>Preferred Date cannot be selected for Saturday or Sunday, Please select Week Day.</a>";   
            returnValue = false;   
        }   

        return returnValue;   

    };   
    // Add the validator to the page validators array:   
    Page_Validators.push(appointmentdateValidator);   

    // Wire up the click event handler of the validation summary link   
    $("a[href='#him_appointmentdate_label']").on("click", function() {   
        scrollToAndFocus('him_appointmentdate_label', 'him_appointmentdate');   
    });   

});  

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.

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