web
You’re offline. This is a read only version of the page.
close
Skip to main content

Notifications

Announcements

Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Pages / Using JavaScript For W...
Power Pages
Unanswered

Using JavaScript For Web Form Validation in Power Portal

(0) ShareShare
ReportReport
Posted on by

Hey, I am trying to validate an attribute of an entity in Web Form Step before resuming to the next step. I would like to make sure that the value entered in Field Token equals the value in Token.

byansakura_1-1599570066239.png

 

Here is my entity lists of names 

byansakura_2-1599570274848.png

 

Ive looked up in the documentation and saw this way but I still dont have a vague idea on how to implement it. Should I add it to the custom javascript? 

byansakura_0-1599569909922.png

Thanks in advance!

 

Categories:
I have the same question (0)
  • justinburch Profile Picture
    Microsoft Employee on at

    Hi @Anonymous,

    Yes, you can add that to the Custom Javascript section of the web form. This code is called by the default behavior of the Next/Submit buttons as a custom validation step and needs only return true/false.

  • Community Power Platform Member Profile Picture
    on at

    That makes a lot of sense, thanks @justinburch . Just to make sure, is the field name i have to apply is the one with cr898_ attached in front of it?

  • Community Power Platform Member Profile Picture
    on at

    I found a reference on https://crmhub.blogspot.com/2018/03/apply-client-side-validation-in-d365-portal-ADX-Studio-Portal.html however i am not sure which part i should change to have my condition set up. I am still uncertain about the field name

  • Verified answer
    justinburch Profile Picture
    Microsoft Employee on at

    Hi @Anonymous,

    This is a different validator - basically this validator is the same as a range validator (number must be between 0 and 100) or a required field validator, which the page will automatically search for on submit.

    Either process would work. The original text block is probably the simplest, as all you have to do is replace the "return true;" with your comparison logic and a resulting true false - e.g. 

    return fieldToken === token;

    However, the CRM Hub link will build a validator that has an error message and a link to the field that is wrong. If this is the desired behavior, see comments added to the original code here:

    // Apply Client Side Validation on FieldName
    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";
    // JB: Replace the string "FieldNameValidator" with anything you want to be the validator key - is not shown to the user.
     newValidator.id = "FieldNameValidator";
    // JB: Replace "FieldName" with the schema/control ID of either your field token or token in the next few lines except the anchor text - e.g. "FieldName" -> "new_fieldtoken", "#FieldName_label" -> "#new_fieldtoken_label", "FieldName is required field." -> "Field Token does not match Token."
     newValidator.controltovalidate = "FieldName";
    // JB: Replace 
     newValidator.errormessage = "<a href='#FieldName_label'>FieldName is required field.</a>";
    // JB: You can ignore this - this is only used if you want to validate groups of fields together without a submit.
     newValidator.validationGroup = ""; // Set this if you have set ValidationGroup on the form
     newValidator.initialvalue = "";
    // JB: here is your function. 
     newValidator.evaluationfunction = function () {
     var FieldToken = $("#new_fieldtoken").val(); // replace with actual
     var Token = $("#new_token").val(); // replace with actual
     if (FieldToken !== Token)
     return false; // return false means SHOW ERROR MESSAGE
     else 
     return true; // return true mean successful 
     };
     // Add the new validator to the page validators array:
     Page_Validators.push(newValidator);
     // Wire-up the click event handler of the validation summary link
    // JB: Replace 'FieldName' with same field as before (e.g. new_fieldtoken)
     $("a[href='#FieldName_label']").on("click", function () { scrollToAndFocus('FieldName_label','FieldName'); });
     });
     }(window.jQuery));
    }

     

  • oliver.rodrigues Profile Picture
    9,368 Most Valuable Professional on at

    hi @Anonymous 

    I am just after noticing you have 3 threads for the same topic

    I would recommend creating only one thread so people can help you better

  • Community Power Platform Member Profile Picture
    on at

    Hello, @justinburch , the code you wrote worked well, thank you very much. However, it only works when both of the field is submitted, am i correct? when i tried at first by only submitting the field fill token, it doesn't work. when i altered my form and submitted both of them, it works. when i tried hiding the token field it doesn't work again... is it only working for field in the current form?

  • Community Power Platform Member Profile Picture
    on at

    Hi @justinburch I ended up putting the field Token in the form along with the Fill Token field, hide the field name and put it on read only mode. However, I still need to make it inviisible to user without hiding the field (hiding the field causes the validation to stop working and only returns error message.) is there any way i can achieve that?

     

    byansakura_0-1599673078181.png

     

  • Community Power Platform Member Profile Picture
    on at

    Dear @OliverRodrigues , I am terribly sorry for the inconvenience i made, I was very new to this and I still find it hard to differentiate stuffs. I will try better next time, thank you..

  • Verified answer
    justinburch Profile Picture
    Microsoft Employee on at

    Hi @Anonymous,

    Yes, if you make a field hidden in the form configuration, it will never be added to the form in the Portal.

    In order to hide the field, you have a couple of options but the simplest approach would be to do the following:

    1. Navigate to your Entity Form configuration
    2. Navigate to the Entity Form Metadata tab
    3. If you have an existing Entity Form Metadata for the Token field, open it - else create a new Entity Form Metadata of type Attribute and select the Token field
    4. In the Control Style section, for CSS Class, add "hidden"
    5. Save the Entity Form Metadata
    6. Refresh your cache and check the Web Form Step

    Note that there may still be some unnecessary space after the Fill Token section - you can use the below code just before the "if (typeof (Page_Validators) == 'undefined') return;" line to remove this post-load (or skip the first 6 steps and this will also hide the Token, but since it runs after page load the user might see it briefly):

    $("#new_token").closest("td").hide();

    Be sure to replace new_token with the field schema of your Token field. 

  • Community Power Platform Member Profile Picture
    on at

    it works! Thankyou @justinburch , that's a life saver!

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Forum hierarchy changes are complete!

In our never-ending quest to improve we are simplifying the forum hierarchy…

Ajay Kumar Gannamaneni – Community Spotlight

We are honored to recognize Ajay Kumar Gannamaneni as our Community Spotlight for December…

Leaderboard > Power Pages

#1
Jerry-IN Profile Picture

Jerry-IN 71

#2
Fubar Profile Picture

Fubar 62 Super User 2025 Season 2

#3
sannavajjala87 Profile Picture

sannavajjala87 31

Last 30 days Overall leaderboard