{"id":3304,"date":"2018-09-13T07:08:50","date_gmt":"2018-09-13T07:08:50","guid":{"rendered":"http:\/\/himbap.com\/blog\/?p=3304"},"modified":"2018-09-13T07:08:50","modified_gmt":"2018-09-13T07:08:50","slug":"adding-date-validation-in-dynamics-365-portal","status":"publish","type":"post","link":"https:\/\/himbap.com\/blog\/?p=3304","title":{"rendered":"Adding date validation in Dynamics 365 Portal"},"content":{"rendered":"

Introduction<\/strong>
\nThis 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.<\/p>\n

Requirement<\/strong>
\nLet\u2019s say we have following web page in portal where portal customer can enter their preferred date for appointment. But in case customer selects Saturday or Sunday, we need to show them our custom validation message.
\n\"validator1\"<\/a>
\nSolution<\/strong>
\nDynamics 365 implement default page validator for the required fields for example if we will try to submit above form without entering preferred date, we will get following validation error
\n\"validator2\"<\/a>
\nSimilarly we can use java script to implement our own custom validation. We can get date selected in preferred date and fetch day from that day. Further we can add our own custom validator to page like below:<\/p>\n

\r\n$(document).ready(function() {\r\n\r\n    \/\/Create appointment date validator\r\n    var appointmentdateValidator = document.createElement('span');\r\n\r\n    \/\/setup validator property and associated field\r\n    appointmentdateValidator.style.display = "none";\r\n    appointmentdateValidator.id = "him_appointmentdateValidator";\r\n    appointmentdateValidator.controltovalidate = "him_appointmentdate"; \/\/datetime field\r\n    appointmentdateValidator.evaluationfunction = function() {\r\n\r\n        var returnValue = true; \/\/set default value as true\r\n\r\n        \/\/get appointment date\r\n        var preferredDate = $("#him_appointmentdate").val();\r\n\r\n        \/\/check if date is missing\r\n        if (preferredDate == "")\r\n            returnValue = false; \/\/if appointment date is blank return false\r\n\r\n        \/\/format date using moment\r\n        preferredDate = moment(new Date(preferredDate), 'DD\/MM\/YYYY');\r\n\r\n        \/\/get day from date\r\n        var daynumber = new Date(preferredDate).getDay();\r\n\r\n        \/\/validation for saturday and sunday\r\n        if (daynumber == 0 || daynumber == 2 || daynumber == 6) {\r\n\r\n            \/\/setup custom validation message\r\n            this.errormessage = "<a href='#him_appointmentdate_label'>Preferred Date cannot be selected for Saturday or Sunday, Please select Week Day.<\/a>";\r\n            returnValue = false;\r\n        }\r\n\r\n        return returnValue;\r\n\r\n    };\r\n    \/\/ Add the validator to the page validators array:\r\n    Page_Validators.push(appointmentdateValidator);\r\n\r\n    \/\/ Wire up the click event handler of the validation summary link\r\n    $("a[href='#him_appointmentdate_label']").on("click", function() {\r\n        scrollToAndFocus('him_appointmentdate_label', 'him_appointmentdate');\r\n    });\r\n\r\n});\r\n<\/pre>\n
We can put above code under Custom JavaScript in entity form. Now if preferred date is missing it will show validation error like below
\n\"validator3\"<\/a><\/p>\n
Stay tuned for more Dynamics 365 Portal Contents !<\/p>\n","protected":false},"excerpt":{"rendered":"
Introduction 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. Requirement Let\u2019s say we have following web page in portal where portal customer can enter their preferred date for appointment. But in case customer selects Saturday or Sunday, we… Read more »<\/a><\/p>\n","protected":false},"author":1,"featured_media":3206,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[402,508],"tags":[624,627,625,626],"_links":{"self":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/3304"}],"collection":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3304"}],"version-history":[{"count":4,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/3304\/revisions"}],"predecessor-version":[{"id":3313,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/3304\/revisions\/3313"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/media\/3206"}],"wp:attachment":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3304"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3304"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3304"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}