SBX - Search With Button

SBX - Forum Post Title

Custom JavaScript validation for Microsoft Portal Web Form

Microsoft Dynamics CRM Forum

Anupam Bishui asked a question on 4 Dec 2018 3:57 PM
My Badges

Question Status

Suggested Answer

Hi,

I've been trying to add a custom JavaScript validation for one of my Portal Web Forms and I can't seem to get it to work. 

I've tried both Additional Field Validation and General Client Side Validation from what's provided here but it just doesn't work : https://docs.microsoft.com/en-us/dynamics365/customer-engagement/portals/add-custom-javascript

Here's what I did for the General Client Side Validation:

if (window.jQuery) {

    (function ($) {

        $(document).ready(function () {
            alert("In here 1");
            if (typeof webFormClientValidate === "function") {
                alert("In here 2");
                var originalValidationFunction = webFormClientValidate;
                if (originalValidationFunction && typeof originalValidationFunction === "function") {
                    alert("In here 3");
                    webFormClientValidate = function () {
                        originalValidationFunction.apply(this, arguments);
                        alert("In here 4");
                        var _allowSubmit = false;

                        var _selected = $("#WebResource_MyCustomPage").contents().find("input[type='checkbox']:checked");

                        if (_selected != null && _selected != undefined && _selected != "" && _selected.length > 0) {
                            alert("In here 5.1");
                            _allowSubmit = true;
                        }
                        else {
                            alert("In here 5.2");                            
                            _allowSubmit = false;
                        }

                        return _allowSubmit;
                    };
                }
            }

        });
    }(window.jQuery));
}

I just get the alert "In Here 1" when the web form step loads, but that's it. And yes I have Enable Validation Summary Links checked.

Does the latest version of the Portal have anything to do with it (considering Microsoft "fixes" stuff that's not broken from time to time)? The only workaround I can think of right now is to use a custom button using DOM injection and hide the default Next button.

Any help would be appreciated.

Reply
Ben Thompson responded on 4 Dec 2018 4:51 PM
My Badges
Suggested Answer

You really need to add a debugger; statement after alert("In here 1"); and run the Javascript in Developer Tools to see what the rest of the code looks like.

Without debugging anything and looking at your code surely the next line should be if (typeof (webFormClientValidate) - note the additional brackets...

Reply
Anupam Bishui responded on 4 Dec 2018 5:11 PM
My Badges

I did try the original code that was provided in the links with the brackets, etc. but that didn't work. So I went on to inspect to see the actual code that's wired to the "onclick" of the Submit button and the code was slightly different. So I modified it according to that. I've tried various combinations but never got it to work.

I would have tried debugger but that wouldn't take me to the line in the code (for some reason) which is why I used alerts so at least I could decipher the flow.

Reply
Ben Thompson responded on 4 Dec 2018 5:24 PM
My Badges

Personally you don't need to be at the line of code - what you want to be in is in the position to see the value of  webFormClientValidate and typeof (webFormClientValidate) from either the javascript console or variable watching as I suspect the value of typeof (webFormClientValidate) is not "function"

Reply
Ravi Kashyap responded on 4 Dec 2018 10:09 PM
Suggested Answer

Hi,

I am currently on portal version 9.0.10.16 and can confirm that this method works. I am using it in my current portals. Refer below. I would suggest to use the below sample and return false by default to to check if this restrict you to go next/ submit. If this works then you can add you custom logic.

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

                   // return false;

                   // to prevent the form submit you need to return false

                   // end custom validation.                    

                   $("#new_fulladdress").prop('disabled', false);

                   $("#new_fulladdress_mailing").prop('disabled', false);

                   return true;

               };

           }

       }

   }(window.jQuery));

}

Hope this helps.

Reply
Ben Thompson responded on 4 Dec 2018 4:51 PM
My Badges
Suggested Answer

You really need to add a debugger; statement after alert("In here 1"); and run the Javascript in Developer Tools to see what the rest of the code looks like.

Without debugging anything and looking at your code surely the next line should be if (typeof (webFormClientValidate) - note the additional brackets...

Reply
Ravi Kashyap responded on 4 Dec 2018 10:09 PM
Suggested Answer

Hi,

I am currently on portal version 9.0.10.16 and can confirm that this method works. I am using it in my current portals. Refer below. I would suggest to use the below sample and return false by default to to check if this restrict you to go next/ submit. If this works then you can add you custom logic.

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

                   // return false;

                   // to prevent the form submit you need to return false

                   // end custom validation.                    

                   $("#new_fulladdress").prop('disabled', false);

                   $("#new_fulladdress_mailing").prop('disabled', false);

                   return true;

               };

           }

       }

   }(window.jQuery));

}

Hope this helps.

Reply

SBX - Two Col Forum

SBX - Migrated JS