cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
NewcombR
Advocate III
Advocate III

Web Form Step - Prevent Submit

Hello,

 

I have a Web Form with several different steps.

 

The second to the last step surfaces a form that only displays a subgrid.

I would like to prevent the Submit button from executing the submit/save action if there are no related records in the subgrid.

Previously, I was able to accomplish this by inserting the following code into the Web Form Step -> Form Options -> Custom Javascript.

 

if (window.jQuery) {
    (function ($) {
        if (typeof webFormClientValidate != "undefined") {
            var originalValidationFunction = webFormClientValidate;
            if (
                originalValidationFunction &&
                typeof originalValidationFunction == "function"
            ) {
                webFormClientValidate = function () {
                    originalValidationFunction.apply(this, arguments);
                    // do your custom validation here
                    const tableBody = document.querySelector(
                        ".view-grid > table > tbody"
                    );

                    // the tbody element isn't created if there are no records.
                    if (!tableBody) {
                        alert("You must add at least one requested service.");
                        // return false; // to prevent the form submit you need to return false
                        return false;
                    }
                    // end custom validation.
                    return true;
                };
            }
        }
    })(window.jQuery);
}

The code was originally lifted from here

 

When the user would click Submit with 0  records added, the standard Alert would appear informing the user that at least 1 record must be included in the subgrid.  Worked like a charm.

 

However, today I noticed that this is no longer working.   The form just submits and doesn't seem to pay any mind to this custom validator.

 

Can someone please assist?  The goal is to prevent the Submit button from executing if there are no records in the subgrid.

 

NewcombR_0-1615831854630.png

 

16 REPLIES 16
justinburch
Microsoft
Microsoft

Hi @OOlashyn, @NewcombR,

I don't work with the Portal team, but this is an issue I've been seeing since last year prior to joining Microsoft.

The issue is (as identified) that whatever code is attempting to initialize the webFormClientValidate function isn't working properly, though webFormClientValidate is still being checked (as expected) in the client submission function.

I tried to find a previous solution I provided that aligned closely with the doc provided sample, but I couldn't find it. The safest solution is to just remove those checks - it would then work for your Web Template.

 

// your original
if (window.jQuery) {
    (function ($) {
        if (typeof webFormClientValidate != "undefined") {
            var originalValidationFunction = webFormClientValidate;
            if (
                originalValidationFunction &&
                typeof originalValidationFunction == "function"
            ) {
                webFormClientValidate = function () {
                    originalValidationFunction.apply(this, arguments);
                    // do your custom validation here
                    const tableBody = document.querySelector(
                        ".view-grid > table > tbody"
                    );

                    // the tbody element isn't created if there are no records.
                    if (!tableBody) {
                        alert("You must add at least one requested service.");
                        // return false; // to prevent the form submit you need to return false
                        return false;
                    }
                    // end custom validation.
                    return true;
                };
            }
        }
    })(window.jQuery);
}

// simplified

$(document).ready(function () {
    window.webFormClientValidate = function () {
        // do your custom validation here
        const tableBody = document.querySelector(
            ".view-grid > table > tbody"
        );

        // the tbody element isn't created if there are no records.
        if (!tableBody) {
            alert("You must add at least one requested service.");
            // return false; // to prevent the form submit you need to return false
            return false;
        }
        // end custom validation.
        return true;
    };
});

 

 I do intend on seeing if there are internal channels to make this issue known.

I hope this helps in the meantime.

View solution in original post

Thank you, @justinburch!  This worked perfectly.

NewcombR
Advocate III
Advocate III

@justinburch - Would the same apply to the additional client side validation function as described here?

 

This line from the documented code in the docs seems as if it would cause the function to terminate prior to adding the custom validator.

if (typeof (Page_Validators) == 'undefined') return;

 

@justinburchthe issue appears to be that Microsoft (or Adx) have dropped a piece of JavaScript.

 

If you look at a Web Page rendered based on the .aspx Page Templates you will see it includes the following script block

<script type="text/javascript">
	function entityFormClientValidate() {
		// Custom client side validation. Method is called by the submit button's onclick event.
		// Must return true or false. Returning false will prevent the form from submitting.
		return true;
	}

	function webFormClientValidate() {
		// Custom client side validation. Method is called by the next/submit button's onclick event.
		// Must return true or false. Returning false will prevent the form from submitting.
		return true;
	}
</script>

 

Where as what is rendered by the Web Template based Page Templates

<script type="text/javascript">					
	function entityFormClientValidate() {
		// Custom client side validation. Method is called by the submit button's onclick event.
		// Must return true or false. Returning false will prevent the form from submitting.
		return true;
	}			
</script>

As its not defined in the above the Custom Validator code returns 'undefined' rather than 'function'

 

What I have also noticed is that some Page Templates are rewrite (.aspx based) for one Portal install vs another type of Portal install  e.g. Full Page (Page Template) is .aspx in Partner Portal and Web Template in Blank/Custom Portal (still has the .aspx populated on the Page Template record - but is using Web Template).  

@NewcombR  only if Page_Validators is not there - the reason why they have it return is that later in the code you add/push your custom validator onto that object (and it would error if not in existence).  As far as I know the Page_Validator code is just used for Entity Form validation, and haven't heard or personally seen any issues with it.

Hi @NewcombR,


Correct, if Page_Validators is missing then it’ll also skip the inner block. The same issue can occur for custom validations (such as code snippets to add “dynamic validation” - eg, “field a is required only if field b is value X”), where people share that code sample and don’t realize that Page_Validators might not be initiated.

 

Typically, if your form has 0 required fields or enforced validations, then Page_Validators will be missing. Examples of this are basic Single Line of Text fields in which none are required. Usually these don’t use any other Validators, as things like character limits are handled by attributes on the input itself.

 

When this occurs, you’d similarly have to create the Page_Validators object, but creating the validations themselves are typically not handled well in the usual code snippets, but it also isn’t usually a problem either.

Hi @Fubar,

Agreed, I think it’s a bug but Microsoft changes. I remember this functionality working (and debugging it end to end) when first learning Dynamics Portals, which is how I knew where to look to resolve it the first time. It would definitely have been after ADX’s versions, and would’ve likely been after 9.0+.

 

I hadn’t noticed which portals install the different aspx pages, but it makes sense - some of the portals added in plugins to create “APIs” before that was released as an actual feature, and some come with Custom Workflow Activities that can be used as steps in workflows - eg the Partner Portal comes with a “For Each” step that allows you to run a workflow against the N relationships of the target record.


I’ve linked this thread in an internal communication, so hopefully there’s some traction and your analysis on the aspx-or-Web Template finding can help lead to the source KT the bug!

Helpful resources

Announcements
PA User Group

Welcome to the User Group Public Preview

Check out new user group experience and if you are a leader please create your group

MBAS Attendee Badge

Claim Your Badge & Digital Swag!

Check out how to claim yours today!

secondImage

Demo Extravaganza is Back!

We are excited to announce that Demo Extravaganza for 2021 has started!

MBAS on Demand

Microsoft Business Applications Summit sessions

On-demand access to all the great content presented by the product teams and community members! #MSBizAppsSummit #CommunityRocks

Users online (54,127)