Client Side Validation using Javascript in ADXStudio

As we all know that Adxstudio does not support CRM form Java Scripts and Business Rules, so you need to create your own client validations scripts on ADX forms whatever you have written on CRM forms.

ADX forms only make field mandatory if it;s mandatory in CRM, if you want to make field mandatory conditionally For Example: If 'State' field value is 'Other' then 'Other' field should be visible and mandatory.

For these type of validations you will have to write your own JavaScript :

The following example demonstrates adding a custom validator. This particular example forces the user to specify an Phone only if the another field for preferred method of contact is set to 'Phone'.

if (window.jQuery) {
   (function ($) {
      $(document).ready(function () {
         if (typeof (Page_Validators) == 'undefined') return;
         // Create new validator
         var newValidator = document.createElement('span');
         newValidator.style.display = "none";
         newValidator.id = "mobilephoneValidator";
         newValidator.controltovalidate = "mobilephone";
         newValidator.errormessage = "<a href='#mobilephone_label'>Mobile Phone is a required field.</a>";
         newValidator.validationGroup = ""; // Set this if you have set ValidationGroup on the form
         newValidator.initialvalue = "";
         newValidator.evaluationfunction = function () {
            var contactMethod = $("#preferredcontactmethodcode").val();
            if (contactMethod != 2) return true; // check if contact method is not 'Phone'.
            // only require Phone if preferred contact method is Phone.
            var value = $("#mobilephone").val();
            if (value == null || value == "") {
            return false;
            } else {
               return true;
            }
         };
 
         // Add the new validator to the page validators array:
         Page_Validators.push(newValidator);
 
         // Wire-up the click event handler of the validation summary link
         $("a[href='#mobilephone_label']").on("click", function () { scrollToAndFocus('mobilephone_label','mobilephone'); });
      });
   }(window.jQuery));
}

Note: Adxstudio forms only shows '*' on field label if the field is mandatory either in CRM or you are making the field mandatory using Entity Form Metadata.

If you making field mandatory using above mentioned ADXStudio given JavaScript code

It works well and make field mandatory, but it doesn't show '*' after field label.

Form will show field is mandatory on Submission of form at Top of the page.

If you want to show asterisk '*' on field label to let user know at the time of form filling, You need to write your own 3-4 line of JS code to show '*' after field label.

Here is the code to append asterisk on ADX form field:

 $('#inputfield_label_id').after('<span id="spanId" style="color: red;"> *</span>');                

Hope this post help someone, Please don't forget to write your feedback this will make me help to improvise and can provide you more and better content