jQuery validate add class to error element?

Question

I have the following code using jQuery Validate.

$("#register").validate({
    debug: true,
    errorClass:'error',
    validClass:'success',
    errorElement:'span',
    highlight: function (element, errorClass, validClass) { 
        $(element).parents("div.control-group")
                  .addClass(errorClass)
                  .removeClass(validClass);
    }, 
    unhighlight: function (element, errorClass, validClass) {
        $(element).parents(".error")
                  .removeClass(errorClass)
                  .addClass(validClass); 
    }
});

Is there a way to add a class to the errorElement, 'span' so that it's...:

<span class="help-inline error">Message</span>

Hakan Fıstık · Accepted Answer · 2016-11-29 09:44:06Z

38

When you specify the errorClass, there's nothing stopping you from making it two things: "help-inline error", i.e.:

$("#register").validate({
    debug: true,
    errorClass: 'error help-inline',
    validClass: 'success',
    errorElement: 'span',
    highlight: function(element, errorClass, validClass) {
      $(element).parents("div.control-group").addClass(errorClass).removeClass(validClass);
    },
    unhighlight: function(element, errorClass, validClass) {
      $(element).parents(".error").removeClass(errorClass).addClass(validClass);
    }
});

Note that you have to use version 1.10 of jQuery Validate to support this. Earlier versions only allow one errorClass.

edited Nov 29, 2016 at 9:44

Hakan Fıstık

19.9k16 gold badges124 silver badges152 bronze badges

answered Mar 29, 2012 at 19:56

Ryley

21.3k2 gold badges69 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

redconservatory Over a year ago

I tried this but then I'm getting this weird thing where a span is getting added (but not removed on the highlight)...

Ryley Over a year ago

Ah you're right, the github version actually fixes this - check out the errors function here: github.com/jzaefferer/jquery-validation/blob/master/… Replace your version of jquery Validate with that, or just that one function ought to be enough...

Hakan Fıstık · Accepted Answer · 2016-11-29 09:57:49Z

0

An alternative of Ryley answer that not include the 'help-inline' into 'control-group' that avoid input offset on highlight.

$("#register").validate({
    debug: true,
    errorClass: 'error help-inline',
    validClass: 'success',
    errorElement: 'span',
    highlight: function(element, errorClass, validClass) {
      $(element).parents("div.control-group").addClass('error').removeClass('success');
    },
    unhighlight: function(element, errorClass, validClass) {
      $(element).parents(".error").removeClass('error').addClass('success');
    }
});

I cound't to include that issue like a comment of the answer...;o(,.

edited Nov 29, 2016 at 9:57

Hakan Fıstık

19.9k16 gold badges124 silver badges152 bronze badges

answered Mar 12, 2013 at 15:12

pdorgambide

1,86722 silver badges35 bronze badges

Comments

Hakan Fıstık · Accepted Answer · 2016-11-29 11:00:48Z

0

Because I think this is for Twitter Booststrap, this is a better solution with no need to update jquery validation:

$("#register").validate({
    debug: true,
    errorClass: 'help-inline',
    validClass: 'success',
    errorElement: 'span',
    highlight: function(element, errorClass, validClass) {
      $(element).parents("div.control-group").addClass("error");

    },
    unhighlight: function(element, errorClass, validClass) {
      $(element).parents(".error").removeClass("error");
    }
});

edited Nov 29, 2016 at 11:00

Hakan Fıstık

19.9k16 gold badges124 silver badges152 bronze badges

answered May 20, 2013 at 18:27

Santiago

2,37010 gold badges34 silver badges65 bronze badges

Comments

Farside · Accepted Answer · 2016-11-29 10:36:02Z

-1

$(".error").addClass('help-inline')

will add the help-inline class to all DOM elements with the error class already.

Is that what you are looking for?

edited Nov 29, 2016 at 10:36

Farside

10.4k4 gold badges52 silver badges63 bronze badges

answered Mar 29, 2012 at 16:42

joehand

3913 silver badges17 bronze badges

Collectives™ on Stack Overflow

jQuery validate add class to error element?

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest