Unanswered

Conditionally setting fields to mandatory

(0) Share

Report

Posted on by jmorgan74

Hi,

I've written some javascript to conditionally show/hide a section of a form based on a yes/no radio button click. This is working great but, I want to be able to set the fields in the hidden section to mandatory if I select "yes" and non-mandatory if I select "no". At the moment, when I hide the fields and submit the form, I get a "field is required" so I want to disable this if the section is hidden.

I understand I can do this in PowerApps using an expression, is this possible in power pages?

Regards,

Jon.

Categories:

General topics

I have the same question (0)

All responses (6)

Answers (1)

SteffenHNW 47 on at

Like (0)

Report
do you use jquery?
I think you have to remove the required attributes:
$("#fieldid").removeAttr("required").removeAttr("aria-required");

I have a question for you. If I hide fields with javascript, there is still a blank box with 41px height. Do you have a better code to hide the whole field without leaving blank spaces?

Greets,
Steffen

Was this reply helpful? Yes No
jmorgan74 8 on at

Like (0)

Report
Hi,
Removing the required attribute doesn't work as the validation is done server-side.

I usually just hide the fields with:

$('#fieldId').hide();
This shouldn't leave any space.

Cheers,
J.

Was this reply helpful? Yes No
Verified answer

Poonam 13 on at

Like (1)

Report
In model app you can use "
formContext.getControl("field_name").setRequiredLevel("required");
in Power portal, you have to use following code to remove validation

//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, 1); } } } } catch (error) { errorHandler(error); }

and to add validation use

try { removeValidator(); if ($("#" + fieldName) != undefined) { $("#" + fieldName).prop('required', true); $("#" + fieldName).closest(".control").prev().addClass("required"); // Create new validator var newValidator = document.createElement('span'); newValidator.style.display = "none"; newValidator.id = fieldName + "Validator"; newValidator.controltovalidate = fieldName; newValidator.errormessage = "<a href='#" + fieldName + "_label'>" + $("#" + fieldName + "_label").html() + " is a required field.</a>"; newValidator.initialvalue = ""; newValidator.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(newValidator); } } catch (error) { errorHandler(error); }

More info : https://learn.microsoft.com/en-us/power-pages/configure/add-custom-javascript

Was this reply helpful? Yes No
jmorgan74 8 on at

Like (0)

Report

Thanks a lot @PHKPHK

Was this reply helpful? Yes No
Zaid-Aboobaker on at

Like (0)

Report

Hi

i am also trying to figure out how to add / remove validation on fields with javascript.

$('#Fieldname').parent().parent().hide();

This worked well for me when hiding fields though.

if you want to hide a set of fields, stick them in a section on the form page and use this:

$("#FirstFieldinthesection").closest("fieldset").hide();

Was this reply helpful? Yes No
GWham1 on at

Like (0)

Report
/*********************************** ** HIDE FIELDSET ***********************************/ $("body").find("fieldset[aria-label='General']").hide(); // via css fieldset[aria-label="Hidden"]{ display:none; } /*********************************** ** HIDE SECTION ***********************************/ $("body").find(".section[data-name='General']").hide(); // via css .section[data-name="General"]{ display:none; } /*********************************** ** HIDE ROW BY FIELD ***********************************/ $("#samplefield").closest("tr").hide(); /*********************************** ** ADD VALIDATOR ***********************************/ //eg. addValidator("customerid", "Customer") function addValidator(fieldName, fieldLabel) { if (typeof (Page_Validators) == 'undefined') return; // Create new validator $("#" + fieldName + "_label").parent().addClass("required"); var newValidator = document.createElement('span'); newValidator.style.display = "none"; newValidator.id = "RequiredFieldValidator" + fieldName; newValidator.controltovalidate = ""; newValidator.errormessage = "<a href='#" + fieldName + "_label'>" + fieldLabel + " is a mandatory field.</a>"; newValidator.validationGroup = ""; newValidator.initialvalue = ""; newValidator.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(newValidator); // Wire-up the click event handler of the validation summary link $("a[href='#" + fieldName + "_label']").on("click", function () { scrollToAndFocus(fieldName + '_label', fieldName); }); } /*********************************** ** REMOVE VALIDATOR ***********************************/ //eg. removeValidator("customerid") function removeValidator(fieldName) { var count = 0; for(var i =0; i < Page_Validators.length - count; i++){ if (Page_Validators[i - count].id == "RequiredFieldValidator" + fieldName) { Page_Validators.splice(i - count, 1); count++; } } $("#" + fieldName + "_label").parent().removeClass("required"); }

Was this reply helpful? Yes No