Unable to override errorPlacement function using $.validator.setDefaults()

[MikeAlhayek]

I am trying to change the error placement to fit css-bootstrap3

I added the following code before I included jquery.validate.unobtrusive v3.2.9

But my errorPlacement function never gets called. also adding errorClass: "help-block" does not override the jquery.validate.unobtrusive default class-name.

$(function () {
        $.validator.setDefaults({
            errorElement: "span",
            errorClass: "help-block",
            highlight: function (element, errorClass, validClass) {
            	console.log('Also, the param errorClass returns input-validation-error instead of help-block', errorClass, validClass, element);
                var elm = $(element);
                var group = elm.closest('.form-group');
                
                if(group.length == 0) {
                    group = elm.closest('.form-group-custom');
                }

                if(group.length) {
                    group.addClass('has-error');
                }
            },
            unhighlight: function (element, errorClass, validClass) {
                console.log('Also, the param errorClass returns input-validation-error instead of help-block', errorClass, validClass, element);

                var elm = $(element);
                var group = elm.closest('.form-group');
                
                if(group.length == 0) {
                    group = elm.closest('.form-group-custom');
                }

                if(group.length) {
                    group.removeClass('has-error');
                }
            },
            errorPlacement: function (error, element) {

            	console.log('errorPlacement... this never gets called :(', error, element);
                var elm = $(element);

                if (elm.parent('.input-group').length || elm.parent('.input-group-custom').length) {
                    error.insertAfter(elm.parent());
                }
                else if (elm.prop('type') === 'checkbox' || elm.prop('type') === 'radio') {
                    error.appendTo(elm.closest(':not(input, label, .checkbox, .radio)').first());
                } else {
                    error.insertAfter(elm);
                }
            },
            submitHandler: function (form) {
                showLoading();
                form.submit();
            }
        });
    });

[mkArtakMSFT]

Thanks for contacting us, @CrestApps.
@SteveSandersonMS , any suggestions? Thanks!

[jbagga]

@CrestApps Are you able to share a repro sample?

[jbagga]

@CrestApps Please let us know if https://stackoverflow.com/questions/5487139/how-can-i-customize-the-unobtrusive-validation-in-asp-net-mvc-3-to-match-my-styl is not helpful. Or provide a working repro sample and I can investigate further. Thanks!

[MikeAlhayek]

@jbagga that does not work. In fact, that's the order I have my scripts included. I will try to create a repo to share when time permits.

[mkArtakMSFT]

Hi @CrestApps. Can you please share a repro project with us to help with investigation?

[MikeAlhayek]

@mkArtakMSFT @jbagga I created a repo to demonstrate the problem https://github.com/CrestApps/MvcWithUnobtrusive

The project is an Asp.Net MVC 5, I used VS 2013 to create it.

The current order in which my scripts are included are as follow

1. /Scripts/jquery-1.10.2.js
2. /Scripts/bootstrap.js
3. /Scripts/jquery.validate.js
4. /Scripts/jquery.validate.setup.js
5. /Scripts/jquery.validate.unobtrusive.js

If you wish to include /Scripts/jquery.validate.setup.js before /Scripts/jquery.validate.unobtrusive.js, simply rename /Scripts/jquery.validate.setup.js to /Scripts/jquery.validate.unobtrusive.setup.js then re-run the app.

As you can see when you run the project, the validation never calls errorPlacement function,

I hope this helps

[jbagga]

@CrestApps Thank you for the project. I am able to see this repro.

I have a work around for now and tagging @kichalla to look at it and see if the product code needs to change.

I split the jquery.validate.setup.js file into two: one that overrides highlight and unhighlight functions from jquery.validate.js (same as yours without errorPlacement function) and another that overrides the errorPlacement function in jquery.validate.unobstrusive.js

To override errorPlacement I created jquery.validate.unobtrusive.setup.js:

var settings = {
    errorElement: "span",
    errorClass: "help-block",
    errorPlacement: function (error, element) {
        console.log('errorPlacement function was called');
        console.log('errorPlacement... this never gets called :(', error, element);
        var elm = $(element);

        if (elm.parent('.input-group').length || elm.parent('.input-group-custom').length) {
            error.insertAfter(elm.parent());
        }
        else if (elm.prop('type') === 'checkbox' || elm.prop('type') === 'radio') {
            error.appendTo(elm.closest(':not(input, label, .checkbox, .radio)').first());
        } else {
            error.insertAfter(elm);
        }
    },
    submitHandler: function (form) {
        showLoading();
        form.submit();
    }
}
$.validator.unobtrusive.options = settings;

The (relevant) order in the _Layout file is:

    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/jqueryval/setup")

    @Scripts.Render("~/bundles/jqueryval/unobtrusive")
    @Scripts.Render("~/bundles/jqueryval/unobtrusive/setup")

Where "~/bundles/jqueryval/setup" is the jquery.validate.setup.js script and "~/bundles/jqueryval/unobtrusive/setup" is the jquery.validate.unobtrusive.setup.js script.

Output:

PR with the changes I described (so it's easier to compare)
https://github.com/CrestApps/MvcWithUnobtrusive/pull/1

[jbagga]

@CrestApps Is your issue solved with the above suggestion?

[MikeAlhayek]

@jbagga yes. I hope there is a fix coming up for this in a future releases as what you provided is a workaround.

Thank you

[mkArtakMSFT]

Thanks @jbagga for looking into this.
@javiercn, can you please continue this investigation as @jbagga will be out from the next week? Thanks!