Dynamic Mandatory Fields in Power Apps Portals
When building forms in Power Apps Portals (now called Power Pages), you often need more control over your data entry process. One of the most common requirements is deciding whether a field should be mandatory (required) or optional, depending on the user’s input.
For example,
if a user selects “Yes” in a dropdown, another field should immediately become required. On the other hand, if the answer is “No”, that field should remain optional. In addition, you might want to show or hide fields based on selections while also controlling their requirement level.
This kind of dynamic form validation not only improves user experience but also makes your portal smarter because users only fill in information that is truly relevant to them.
This dynamic behavior improves user experience and ensures that you collect the right data without forcing unnecessary inputs.
Step 1 : Identify the field , Which field you wana Mandatory and Non-Mandatory
Step 2: Add JavaScript to Control Field Requirement
// Example: Trigger based on dropdown selection
$(document).ready(function () {
$("#new_customdropdown").change(function () {
var selectedValue = $(this).val();
if (selectedValue === "Yes") {
makeFieldMandatory("new_comments"); // Make comments required
} else {
makeFieldOptional("new_comments"); // Make comments optional
}
});
});//Make mandatory field
var MakeRequired = function (fieldName) {
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() +
" is a required field.</a>";
Requiredvalidator.initialvalue = "";
Requiredvalidator.evaluationfunction = function () {
var value = $("#" + fieldName).val();
if (value == null || value == "") {
return false;
} else {
return true;
}
};
// Add the new validator to the page validators array:
Page_Validators.push(Requiredvalidator);
}
}
catch (error) {
errorHandler(error);
}
}//Make UnMandatory
var MakeNotRequired = function (fieldName) {
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);
}
}Step 3: Deploy and Test
Add the script to your Portal Form’s Custom JavaScript section.
Publish your changes.
Test by selecting different values in your dropdown.
Conclusion
Dynamic field validation in Power Apps Portals / Power Pages is an essential technique to improve form usability and ensure accurate data collection. With just a few lines of JavaScript, you can:
Make fields mandatory or optional in real time.
Control form behavior based on user input.
Enhance user experience while reducing data entry errors.
By applying these methods, your portal forms will feel smarter, cleaner, and more user-friendly — helping you get the right data without frustrating your users.
How to Make Fields Mandatory or Optional Dynamically in Power Apps Portals
I have a multi-step form with 10 text fields on Step 1 and 5 on Step 2. None of the fields are required by default. In this case, Page_Validators is always undefined.
To work around this, I made one field required using metadata, even though it’s not actually required under normal conditions. That field should only be required based on the value of another field.
Now I’m facing two issues:
Why is Page_Validators undefined when none of the fields are marked as required?
When I make one field required (via metadata) which is workaround to have page_validators array, and later try to remove that validator dynamically using JavaScript, it initially works—Page_Validators no longer contains that validator.
But when I click “Next,” a postback occurs and the validator reappears.
I don’t understand why the validator keeps coming back even though I removed it from Page_Validators.
I even tried using the code you suggested earlier (presumably to remove or disable the validator), but it doesn’t persist across postbacks. How can I conditionally apply validation and ensure it doesn’t reappear when it shouldn’t?