Answered

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)

Sort by

SteffenHNW 47 on at

Like (0)

Report
Copy link

Link copied!
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
Copy link

Link copied!
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
Copy link

Link copied!
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
Copy link

Link copied!

Thanks a lot @PHKPHK

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

Like (0)

Report
Copy link

Link copied!

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
Copy link

Link copied!
/*********************************** ** 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