Skip to main content

Notifications

Power Pages - Customize & Extend
Suggested answer

Multistep Form: Custom Javascript Not Working for Validation

Posted on 5 Nov 2024 19:47:16 by 11
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:
  • Fubar Profile Picture
    Fubar 7,552 on 12 Nov 2024 at 00:42:04
    Multistep Form: Custom Javascript Not Working for Validation
    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.
     
  • bzs Profile Picture
    bzs 11 on 08 Nov 2024 at 14:00:06
    Multistep Form: Custom Javascript Not Working for Validation
    Does this mean anything or is it expected behavior?
     
  • Suggested answer
    Fubar Profile Picture
    Fubar 7,552 on 08 Nov 2024 at 03:17:49
    Multistep Form: Custom Javascript Not Working for Validation
    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.
     
  • bzs Profile Picture
    bzs 11 on 07 Nov 2024 at 23:45:10
    Multistep Form: Custom Javascript Not Working for Validation
    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.
     
     
  • bzs Profile Picture
    bzs 11 on 07 Nov 2024 at 22:58:52
    Multistep Form: Custom Javascript Not Working for Validation
  • Suggested answer
    Fubar Profile Picture
    Fubar 7,552 on 07 Nov 2024 at 03:56:24
    Multistep Form: Custom Javascript Not Working for Validation
    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)
     
  • bzs Profile Picture
    bzs 11 on 06 Nov 2024 at 18:30:38
    Multistep Form: Custom Javascript Not Working for Validation
    Hi Fubar,
     
    Thanks for your help.
     
    How do I check to see if "entityFormClientValidate" exists?
  • Suggested answer
    Fubar Profile Picture
    Fubar 7,552 on 06 Nov 2024 at 04:44:27
    Multistep Form: Custom Javascript Not Working for Validation
    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"));
     

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

November 2024 Newsletter…

November 2024 Community Newsletter…

Community Update Oct 28…

Power Platform Community Update…

Tuesday Tip #7 Community Profile Tips…

Welcome to a brand new series, Tuesday Tips…

Leaderboard

#1
WarrenBelz Profile Picture

WarrenBelz 143,129

#2
RandyHayes Profile Picture

RandyHayes 76,308

#3
Pstork1 Profile Picture

Pstork1 63,797

Leaderboard

Featured topics