Skip to main content

Notifications

Community site session details

Community site session details

Session Id :
Power Pages - Customize & Extend
Unanswered

Validate fields based on other fields

(1) ShareShare
ReportReport
Posted on by 36

Hello. I currently have a form where the user must select an option from a dropdown list. Depending on what choice the user selects, certain fields must be changed to required/not required and some fields must hide/show.

 

dropdown- field1 (choice1, choice2)

required field- field2

hidden field- field3

 

I found this code in another similar question and have read the documentation by Microsoft with similar code to this. My issue is I'm pretty new to code and am getting confused by which things to change, which labels go where, etc. 

setRequired = function (fieldName) {
 var $label = $("#" + fieldName + "_label");
 $label.parent().addClass("required");
 addValidator(fieldName, $label.text());
};

setOptional = function (fieldName) {
 var $label = $("#" + fieldName + "_label");
 $label.parent().removeClass("required");
 removeValidator("RequiredFieldValidator" + fieldName);
};

addValidator = function (fieldName, label) {
 var nV = document.createElement("span");
 var message = "<span class='font-weight-bold'>" + (typeof label === "string" ? label : fieldName) + "</span> is a required field.";
 nV.style.display = "none";
 nV.validationGroup = "";
 nV.initialvalue = "";
 nV.id = "RequiredFieldValidator" + fieldName;
 nV.controltovalidate = "#" + fieldName;
 nV.errormessage = "<a href=\'#" + fieldName +
 "_label\' onclick=\'javascript&colon;scrollToAndFocus(\"" + fieldName + "_label\",\"" +
 fieldName + "\");return false;\'>" + message + "</a>";
 var $field = $("#" + fieldName);
 nV.evaluationfunction = function () {
 var value = $field.val();
 return typeof value === "string" && value !== "";
 };
 var $validator = $field.closest("td").find("div.validators");
 if ($validator.length === 0) {
 var $info = $field.closest("td").find("div.info");
 $validator = $("<div class='validators'></div>").appendTo($info);
 }
 $validator.append(nV);
 window.Page_Validators.push(nV);
};

removeValidator = function (validatorId) {
 $.each(window.Page_Validators, function (index, validator) {
 if (validator !== null && validator !== undefined &&
 validator.id === validatorId) {
 window.Page_Validators.splice(index, 1);
 }
 });
};

 

How do I properly state if this choice and this choice are selected, then set this field as required?

Also is there a way to have the field grey out (still be visible but not editable), instead of hiding it completely?

Any help at all would be really appreciated.

Categories:
  • e.lll Profile Picture
    36 on at
    Re: Validate fields based on other fields

    Thanks I'll look into these!

  • oliver.rodrigues Profile Picture
    9,315 Most Valuable Professional on at
    Re: Validate fields based on other fields

    Nicholas Hayduk has recently posted a video on JavaScript validation, he is also doing a JS on Power Pages call today, hopefully you can attend (if not this will be available on Youtube in about two days)

    Engineered Code - Portals Community Call

    Power Pages Tip #186 - Adding Custom Validators to Forms - Engineered Code - YouTube

     

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

Michael Gernaey – Community Spotlight

We are honored to recognize Michael Gernaey as our June 2025 Community…

Congratulations to the May Top 10 Community Leaders!

These are the community rock stars!

Announcing the Engage with the Community forum!

This forum is your space to connect, share, and grow!

Leaderboard > Power Pages

#1
Fubar Profile Picture

Fubar 69 Super User 2025 Season 1

#2
oliver.rodrigues Profile Picture

oliver.rodrigues 49 Most Valuable Professional

#3
Jon Unzueta Profile Picture

Jon Unzueta 43

Featured topics