question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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();
            }
        });
    });

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:1
  • Comments:17 (8 by maintainers)

github_iconTop GitHub Comments

3reactions
Nettsentriskcommented, Aug 16, 2018

Any reason why $.validator.defaults doesn’t get passed on to $.validator.unobtrusive.options by default? That would surely simplify things a bit…

2reactions
Rabadash8820commented, Aug 25, 2018

Agreed with @Nettsentrisk. I’ve been using ASP.NET Core with jQuery Unobtrusive Validation for about a year now, and trying to modify the default validation behavior has always been a nightmare since we have no control over when $.validate() is called and $.validator.setDefaults() seems to only work sporadically. There at least needs to be some official info on the Model Validation topic about how to change the jQuery Validate settings correctly within ASP.NET Core.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Jquery Validation plug-in custom error placement
You have the error element and the element that was invalid. jQuery.validator.setDefaults({ errorPlacement: function(error, element) { error.appendTo(element.
Read more >
JQuery validation not working for some controls on 2022.1.119
Hello, I am using JQuery validation to validate a form containing many ... errorPlacement: function (error, element) { //Custom position: ...
Read more >
Validation | ASP.NET MVC - Syncfusion
If validation gets fail, you have to place the error message in proper position using the “errorPlacement” API that is available in the...
Read more >
Clear Jquery validation error messages - MSDN
Which is calling a js function,written in js file. What i want to do is when i change the dropdown i want to...
Read more >
Jquery validation - JavaScript - SitePoint Forums
$(document).ready(function() { $.validator.setDefaults({ errorPlacement: function (error, element) { if (element.prop('type') === 'text') ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found