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

Announcements

News and Announcements icon
Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Pages / Custom conditional Val...
Power Pages
Unanswered

Custom conditional Validation on multiple fields

(0) ShareShare
ReportReport
Posted on by 85

I have multiple fields on Advance form tab step 

Dropdown1 ( values 1 , 2, 3)  , Textbox1 , TextBox2, Textbox3

Scenario

Dropdown1 is required field 

 DD1 is set to blank initially

when DD1 has value 1 then textbox1 and Textbox2 also become required and need value

when DD1 has value 2 then textbox3 becomes required and other two text can be blank 

when DD1 has value 3 then no textbox needs to have value

 

I referred to this msdn kb 

added below on js section of advance form step

What i did was i added four section for create new validator

DD1=AT1Validator , TB1=AT2Validator , TB2==AT1Validator, TB3.

Then added a validation group But it does not works correctly so when on page DD1 does not have value it shows error in validation summary for all three but ideally on step load DD1 is blank so TB1, TB2 can not be mandatory. Can someone correct what i am doing wrong with setting the validation configuration "validation group , evaluationfunction " and where to execute the return statement. 

 

 

 

 

 

 

 

 

 

Categories:
I have the same question (0)
  • natalya Profile Picture
    133 on at

    Hi @Dexter_Oz ,

     

    You have to specify the same validationGroup  "SectionB" you used, on your Entity Form (Form Options->Validation Group)

    It would be my first step to check.

     

    Hoping it helps.

    NatGeo

  • Dexter_Oz Profile Picture
    85 on at

    Hi @NatGeo , i tried setting the same validation group then on screen errors shows for all three fields DD1, TB1, TB2 irrespective of the value. 

     

    Thanks,

     

  • Fubar Profile Picture
    8,497 Super User 2026 Season 1 on at

    You will probably have to show your code.

  • Dexter_Oz Profile Picture
    85 on at

    I have added three sections for below code one for DD , TB1, TB2 replicating the above scenario but it does not works on conditional validation scenario. 

    If i use return  statement on first validation then other two dont work and if i try to group all three in group then all three show up in every case.  

     

    if (typeof (Page_Validators) == 'undefined') return;
     // Create new validator
     var newValidator = document.createElement('span');
     newValidator.style.display = "none";
     newValidator.id = "emailaddress1Validator";
     newValidator.controltovalidate = "emailaddress1";
     newValidator.errormessage = "<a href='#emailaddress1_label' referencecontrolid='emailaddress1 ' onclick='javascript&colon;scrollToAndFocus(\"emailaddress1 _label\",\" emailaddress1 \");return false;'>Email 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 'Email'.
     // only require email address if preferred contact method is email.
     var value = $("#emailaddress1").val();
     if (value == null || value == "") {
     return false;
     } else {
     return true;
     }

      

  • Fubar Profile Picture
    8,497 Super User 2026 Season 1 on at

    Is that the actual code you are using as its a copy and paste from the link (and is also missing the end bits such as Pushing it on to the validator object).

     

    If you have set a Validation Group in Metadata for the items then this must be populated with that group

     

     

     newValidator.validationGroup = "";

     

     

     

    If you have Pushed multiple validators (e.g. 1 for each field) on to "Page_Validators" then you need to make sure that your code inside each validator returns true when it should (or remove certain validators from "Page_Validators")

    Similarly if the fields are marked as mandatory on the DataVerse form or via metadata, and you have not made them optional via JQuery then they will be expecting values.

     

    You can put debugger; or use alert() inside the validator code to see what is triggering etc

  • Dexter_Oz Profile Picture
    85 on at

    Here is the code without section defined but i tried with section name for all three validators then rather than conditional it alerts for all three fields at same time. 

     if (typeof(Page_Validators) == 'undefined') return; 
    
     var validateExplorationType = document.createElement('span');
     validateExplorationType.style.display = "none";
     validateExplorationType.id = "AT1Validator";
     validateExplorationType.controltovalidate = "1applicationtypelicensetype";
     validateExplorationType.errormessage = "<a href='#1applicationtypelicensetype_label' referencecontrolid='1applicationtypelicensetype' onclick='javascript&colon;scrollToAndFocus(\"1applicationtypelicensetype_label\",\" 1applicationtypelicensetype \");return false;'>Exploration License is a required field.</a>";
     validateExplorationType.validationGroup = ""; // Set this if you have set ValidationGroup on the form
     validateExplorationType.initialvalue = "";
     validateExplorationType.evaluationfunction = function() {
    
     var value = $('#1applicationtypelicensetype option:selected').val();
     if (value == null || value == "") {
     return false;
     } 
     else {
     return true;
     }
     
     }
     
     // validator
     var validateExpTypeCaseNum = document.createElement('span');
     validateExpTypeCaseNum.style.display = "none";
     validateExpTypeCaseNum.id = "AT2Validator";
     validateExpTypeCaseNum.controltovalidate = "1eln";
     validateExpTypeCaseNum.errormessage = "<a href='#1eln_label' referencecontrolid='1eln' onclick='javascript&colon;scrollToAndFocus(\"1eln_label\",\" 1eln \");return false;'>License Number and Area Size is a required when License Type is Renew.</a>";
     validateExpTypeCaseNum.validationGroup = ""; // Set this if you have set ValidationGroup on the form
     validateExpTypeCaseNum.initialvalue = "";
     validateExpTypeCaseNum.evaluationfunction = function() {
    
     var value2 = $('#1applicationtypelicensetype option:selected').text();
     if (value2 != "Renew") {
     return true;
     };
     if (value2 == "Renew") {
     var caseNum = $("#1eln").val();
     
     if (caseNum == null || caseNum == "" ) {
     return false;
     } else {
     return true;
     }
     }
     }
     // validator
     var validateAreaSize = document.createElement('span');
     validateAreaSize.style.display = "none";
     validateAreaSize.id = "AT2Validator";
     validateAreaSize.controltovalidate = "1apaSize";
     validateAreaSize.errormessage = "<a href='#1apaSize_label' referencecontrolid='1apaSize' onclick='javascript&colon;scrollToAndFocus(\"1apaSize_label\",\" 1apaSize \");return false;'>License Number and Area Size is a required when License Type is Renew.</a>";
     validateAreaSize.validationGroup = ""; // Set this if you have set ValidationGroup on the form
     validateAreaSize.initialvalue = "";
     validateAreaSize.evaluationfunction = function() {
     
     var value2 = $('#1applicationtypelicensetype option:selected').text();
     if (value2 != "Renew") {
     return true;
     };
     if (value2 == "Renew") {
     var areaSize = $("#1apaSize").val();
     
     if ( areaSize == null || areaSize == "" ) {
     return false;
     } else {
     return true;
     }
     }
     }
     
     Page_Validators.push(validateExplorationType);
     Page_Validators.push(validateExpTypeCaseNum);
     Page_Validators.push(validateAreaSize);
  • Fubar Profile Picture
    8,497 Super User 2026 Season 1 on at

    Are any of the fields set Mandatory on the form? if so, this will probably trigger the system's validators before it hits your validations.  

    Have you been clearing the Portal Cache/Syncing after making changes.

    Put a "debugger;" statement inside each of the .evaluationfunction functions and then F12 in your browser when you submit the form and check each of the If statements and values.

     

  • Dexter_Oz Profile Picture
    85 on at

    No forms fields are not mandatory, I cleared the cache and checked. I did put console.log to capture when it goes in each loop. It goes to first validator and if that is false it returns all error message on notification if they are grouped or otherwise if not grouped then first one which is false

  • Fubar Profile Picture
    8,497 Super User 2026 Season 1 on at

    You are missing a semi-colon to close out each of the  .evaluationfunction = function() {....} blocks

     

     

     if (typeof(Page_Validators) == 'undefined') return; 
    
     var validateExplorationType = document.createElement('span');
     validateExplorationType.style.display = "none";
     validateExplorationType.id = "AT1Validator";
     validateExplorationType.controltovalidate = "1applicationtypelicensetype";
     validateExplorationType.errormessage = "<a href='#1applicationtypelicensetype_label' referencecontrolid='1applicationtypelicensetype' onclick='javascript&colon;scrollToAndFocus(\"1applicationtypelicensetype_label\",\" 1applicationtypelicensetype \");return false;'>Exploration License is a required field.</a>";
     validateExplorationType.validationGroup = ""; // Set this if you have set ValidationGroup on the form
     validateExplorationType.initialvalue = "";
     validateExplorationType.evaluationfunction = function() {
    
     var value = $('#1applicationtypelicensetype option:selected').val();
     if (value == null || value == "") {
     return false;
     } 
     else {
     return true;
     }
     
     };

     

     

  • LS101 Profile Picture
    4 on at

    Hi I have similar issue.

     

    My Scenario is I have a preferred contact type option set and when user chooses email I hide contact number and show email value and on submit if it is missing proper value I have to fire error and not allow form submission and vice versa for when user choses phone number.

     

    The code runs fine if chose 1 but if I switch to other  it wont fire and finishes form submission. Please review and let me know where should I correct my code.

    if (window.jQuery) {
    (function ($) {
    $(document).ready(function () {
    showHideControls();
    $("#dhhs_emailaddress").closest("td").find("div.control, div.info").hide();
    $("#dhhs_contactnumber").closest("td").find("div.control, div.info").hide();
    $('#dhhs_preferredmethodofcontact').change(function () {
    if ($('#dhhs_preferredmethodofcontact').length) {
    showHideControls();
    }
    });
    $('#dhhs_contactnumber').change(function () {
    formatPhoneNumber(this);
    });
    });
    }(window.jQuery));
    }
    //Format Phone NUmber
    function formatPhoneNumber(phoneNumberField) {
    var username_length = $(phoneNumberField).val().length;
    if (username_length == 10) {
    $(phoneNumberField).val($(phoneNumberField).val().replace(/^(\d{3})(\d{3})(\d+)$/, "$1-$2-$3"));
    }
    }

    //Pass Id to makeRequired & makeNotRequired function
    function showHideControls() {
    debugger;

    var preferredMethodOfContact = $("#dhhs_preferredmethodofcontact").val();
    if (preferredMethodOfContact == 372950000) //if it’s a Email
    {
    MakeFieldRequired('dhhs_emailaddress', 'is a required field.');
    makeNotRequired('dhhs_contactnumber');
    ShowHideRequired('dhhs_emailaddress', 'dhhs_contactnumber');
    }
    else if (preferredMethodOfContact == 372950001) //if it is Phone
    {
    MakeFieldRequired('dhhs_contactnumber', 'has to be US 10 digit format and is a required field.');
    makeNotRequired('dhhs_emailaddress');
    ShowHideRequired('dhhs_contactnumber', 'dhhs_emailaddress');
    }
    }

    //Make field required.
    function MakeFieldRequired(fieldName, errorMessage) {
    try {

    if ($("#" + fieldName) != undefined) {
    $("#" + fieldName).prop('required', true);
    $("#" + fieldName).closest(".control").prev().addClass("required");
    // Create new validator
    var Requiredvalidator = document.createElement('span');
    Requiredvalidator.style.display = "none";
    Requiredvalidator.id = fieldName + "Validator";
    Requiredvalidator.controltovalidate = fieldName;
    Requiredvalidator.errormessage = "<a href='#" + fieldName + "_label'>" + $("#" + fieldName + "_label").html() + errorMessage + "</a>";
    Requiredvalidator.initialvalue = "";
    Requiredvalidator.evaluationfunction = function () {
    var value = $("#" + fieldName).val();
    alert('value of email ' + value);
    if (value == null || value == "") {
    return false;
    }
    else if (value < 10 || value > 10) {
    if (fieldName == 'dhhs_contactnumber') {
    return false;
    }
    }
    return true;
    };

    // Add the new validator to the page validators array:
    Page_Validators.push(Requiredvalidator);
    }
    }
    catch (error) {
    errorHandler(error);
    }
    }
    function makeNotRequired(fieldName) {
    //Clean up previous validator <span> if present
    if ($('#ValidationSummaryEntityFormView').length) {
    $('#ValidationSummaryEntityFormView').hide();
    }

    try {
    if ($("#" + fieldName) != undefined) {
    $("#" + fieldName).closest(".control").prev().removeClass("required");
    $("#" + fieldName).prop('required', false);

    for (i = 0; i < Page_Validators.length; i++) {
    if (Page_Validators[i
    ].id == fieldName + "Validator") {
    Page_Validators.splice(i);
    }
    }
    }
    }
    catch (error) {
    errorHandler(error);
    }
    }

    function ShowHideRequired(fieldNameToShow, fieldNameToHide) {
    try {
    if ($("#" + fieldNameToShow) != undefined)
    $("#" + fieldNameToShow).closest("td").find("div.control, div.info").show();
    if ($("#" + fieldNameToHide) != undefined)
    $("#" + fieldNameToHide).closest("td").find("div.control, div.info").hide();
    }
    catch (error) {
    errorHandler(error);
    }
    }// JavaScript source code

     

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

Introducing the 2026 Season 1 community Super Users

Congratulations to our 2026 Super Users!

Kudos to our 2025 Community Spotlight Honorees

Congratulations to our 2025 community superstars!

Congratulations to the April Top 10 Community Leaders!

These are the community rock stars!

Leaderboard > Power Pages

#1
11manish Profile Picture

11manish 42

#2
Valantis Profile Picture

Valantis 24

#3
omkarsupreme Profile Picture

omkarsupreme 23

Last 30 days Overall leaderboard