Add custom form field client validation for Advanced Forms in Power Portal

Client validations are very important to alert users if some field value is not supplied when a user clicks Submit button or do some change in a form field.

We can add custom JavaScript and jQuery to have our own custom field validations. Lets us see how we can do that.

I have an Advanced form defined which shows two steps.

The first step is User Information which points to first tab of the Loan Application table form. In the first form by default all form fields are mandatory.

And the second step is to display Loan Information which points to Loan Information TAB of the Loan Application table form. But in the second TAB for I have no mandatory field.

Now I want to add some custom validation to make the Apply Date field as mandatory if Loan Amount is selected. So to do this we have to add Custom JavaScript for the Second Form Step.

Open the Advanced Form Step “Loan Information” and go to Form Options and scroll down to see the Custom JavaScript section.

Now before writing the JS you have to find out the ID of the fields that you want to check value and want top show error message. Now to do that open the page which contains the form and right click and inspect element to idefy the ID of the controls.

So for me the ID of Apply Date is “cr8eb_applydate_datepicker_description” and ID of Loan amount is “cr8eb_loanamount“. Now I can use these values to write custom validation.

use the below script to do this.

if (window.jQuery) {
   (function ($) {
      $(document).ready(function () {
         if (typeof (Page_Validators) == 'undefined') return;
         
         // my custom validator
         var newValidator = document.createElement('span');
         newValidator.style.display = "none";
         newValidator.id = "applydate1Validator";
         newValidator.controltovalidate = "cr8eb_applydate_datepicker_description";
         newValidator.errormessage = "<a href='#cr8eb_applydate_datepicker_description'>Apply Date is a required.</a>";
         newValidator.validationGroup = ""; // Set this if you have set ValidationGroup on the form
         newValidator.initialvalue = "";
         newValidator.evaluationfunction = function () {
            var loanamount = $("#cr8eb_loanamount").val();
            if (loanamount == "") return true; // check if loan amount is not null.
            // only require apply date if loan amount is supplied
            var value = $("#cr8eb_applydate_datepicker_description").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='#cr8eb_applydate_datepicker_description']").on("click", function () { scrollToAndFocus('cr8eb_applydate_datepicker_description','cr8eb_applydate_datepicker_description'); });
      });
   }(window.jQuery));
}

In the above script I am creating a new Validator and checking the condition then adding the validator inside Page_Validatiors array. Return false if you don’t want to submit else return true.

Now Clear Cache and Test it. Now if you click submit by entering a Loan amount you will see the error message.

Now you can add your custom validations as per your requirement.

You can also use webFormClientValidate to extend your client scripts as given below.

if (window.jQuery) {
   (function ($) {
      if (typeof (webFormClientValidate) != 'undefined') {
         var originalValidationFunction = webFormClientValidate;
         if (originalValidationFunction && typeof (originalValidationFunction) == "function") {
            webFormClientValidate = function() {
               originalValidationFunction.apply(this, arguments);
               // do your custom validation here
               // return false; // to prevent the form submit you need to return false
               // end custom validation.
               return true;
            };
         }
      }
   }(window.jQuery));
}

Hope it will help in your projects.

You can enroll now !We are giving 30% discount on our Internship Program

Don’t miss the chance to participate in the upcoming Internship Program which will be done using Microsoft Dot Net Web Development Full Stack Technology. The new batch will be starting from May 20, 2024.  We will have most experienced trainers for you to successfully complete the internship with live project experience.

Why to choose Our Internship Program?

Industry-Relevant Projects
Tailored Assignments: We offer projects that align with your academic background and career aspirations.
Real-World Challenges: Tackle industry-specific problems and contribute to meaningful projects that make a difference.

Professional Mentorship
Guidance from Experts: Benefit from one-on-one mentorship from seasoned professionals in your field.
Career Development Workshops: Participate in workshops that focus on resume building, interview skills, and career planning.

Networking Opportunities
Connect with Industry Leaders: Build relationships with professionals and expand your professional network.
Peer Interaction: Collaborate with fellow interns and exchange ideas, fostering a supportive and collaborative environment.

Skill Enhancement
Hands-On Experience: Gain practical skills and learn new technologies through project-based learning.
Soft Skills Development: Enhance communication, teamwork, and problem-solving skills essential for career success.

Book Your Seat Now

Free Demo Class Available