Multistep Form: Custom Javascript Not Working for Validation

(0) Share

Report

Posted on by bzs

I have written a custom Javascript validation code and added it to the "Custom Javascript" field in the first form step of my multistep form, but it is completely ignored.

On step one of the form there are three "toggles" (YES/NO choice columns).

I need to prevent proceeding to the next step if none of the 3 toggles = Yes or True.

Is my code incorrect? Is there a setting that needs to be enabled for the custom Javascript to be used?

if (window.jQuery) {
    (function ($) {
        if (typeof (entityFormClientValidate) != 'undefined') {
            var originalValidationFunction = entityFormClientValidate;
            if (originalValidationFunction && typeof (originalValidationFunction) == "function") {
                entityFormClientValidate = function() {
                    originalValidationFunction.apply(this, arguments);
 
                    var evA = $('#ev_a').is(':checked');
                    var evB = $('#ev_b').is(':checked');
                    var evC = $('#ev_c').is(':checked');
                    
                    if (!evA && !evB && !evC) {
                        alert('Please select at least one ev type: EV A, EV B, or EV C.');
                        return false;
                    }
 
                    return true;
                };
            }
        }
    }(window.jQuery));
}

Categories:

Customize & extend

I have the same question (0)

All responses (8)

Answers (0)

Suggested answer

Fubar 8,384 Super User 2025 Season 2 on at

Like (0)

Report
First thing to determine is probably, does the validation get triggered at all e.g. does the object "entityFormClientValidate" exist (if it doesn't your validation will not run).

If it is running, rather than trying get a sub-element directly, then you can get the checked value for each of the Yes/No fields ('0' or '1') using

$("#field_schema_name [type='radio']:checked").val();

Note, if you have chosen to render the Yes/No as a check box the code is different:

$('#field_schema_name').is(":checked"));

Was this reply helpful? Yes No
bzs 11 on at

Like (0)

Report

Hi Fubar,

Thanks for your help.

How do I check to see if "entityFormClientValidate" exists?

Was this reply helpful? Yes No
Suggested answer

Fubar 8,384 Super User 2025 Season 2 on at

Like (0)

Report

Preview your web page and after it has loaded, open the browser debugger/console ( F12 ) and then in the Console type entityFormClientValidate and hit enter and see if it returns something or gives you an undefined.

You can also check for Page_Validators (it is also available in the multistep - this object allows you to format your errors as though they are out of the box ones) https://learn.microsoft.com/en-us/power-pages/configure/add-custom-javascript#additional-client-side-field-validation

If undefined you will either need to create it yourself (the code you provided skips if it is undefined ) or add an out of the box validation e.g. set a field on the form as mandatory/business required either in dataverse or by using a metadata record on the form/step in question (metadata is available as a related record to the Basic Form or against the Step in a multistep form - defining metadata is available the in the Power Pages Management app is not currently in the designer)

Was this reply helpful? Yes No
bzs 11 on at

Like (0)

Report

Was this reply helpful? Yes No
bzs 11 on at

Like (0)

Report

I am able to see the entityFormClientValidate object and the script I have attached to the form step shows when I hover over this in the console.

Is it possible to check if the validation is actually running on the click of the "next" button?

Metadata "required" fields does not work in this instance as only one of the three fields needs to be checked to proceed.

Was this reply helpful? Yes No
Suggested answer

Fubar 8,384 Super User 2025 Season 2 on at

Like (0)

Report

If the object exists it is almost always used called - i.e. not a lot of known issues (the issue is more if the object doesn't exist at all).

Try using the code without your changes (use what is further down the page in the link I provided earlier), and after the originalValidationFunction.apply(this, arguments); line add a javascript debugger; statement. Then have the browsers debugger/console open when you click next - if its working you should breakpoint at the debugger line.

Was this reply helpful? Yes No
bzs 11 on at

Like (0)

Report

Does this mean anything or is it expected behavior?

Was this reply helpful? Yes No
Fubar 8,384 Super User 2025 Season 2 on at

Like (0)

Report

Is not related to your validation issue. Generally would indicate that there is a Control in use on one of your fields or a subgrid and a) it wants it to be compiled using react 17, b) a file that it is referencing is not being found.

Was this reply helpful? Yes No