Conditionally setting fields to mandatory

[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.

[SteffenHNW]

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

[jmorgan74]

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.

[PHKPHK · Accepted solution]

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

[jmorgan74]

Thanks a lot @PHKPHK

[Zaid-Aboobaker]

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();

[GWham1]

/***********************************
** 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");
}