Change class of input [type=text] on JQuery validation error

Question

I'm trying to validate my form using the JQuery .validate() function. However the validation process works, I don't like the looks of the validation message: Especially not when I try to add a class to an input box.

Screenshot of my problem

As you can see, I want to change the class of all my input fields when something throws an error, however this only works with a larger text box. This is my .validate() function at the moment, stripped down:

('#form0').validate({
     errorClass: "form-error",
});

My input fields have a class, name and id assigned, would it be possible to use any of those to correctly add the class to the input field? And if so, how would I be able to do this, as errorClass is not working properly for me.

Just to make sure: I want to add the class "form-error" to the input fields, so they get a red border as seen in the larger text box

faby · Accepted Answer · 2014-12-11 15:36:38Z

2

You should use errorPlacement option to achieve your goal

errorPlacement: function(error, element) {
            offset = element.offset();
            error.insertBefore(element)
            error.addClass('someCssClassThatYouWant');  
            error.css('position', 'absolute');
            error.css('left', offset.left + element.outerWidth());
            error.css('top', offset.top);
        }

use it in this way

$("#yourElement").validate({
 //other options,
  errorPlacement: function(error, element) {

  }
});

update

jquery validate gives .error class to invalid input so you can just check for

label.error { background: none; }

edited Dec 11, 2014 at 15:36

answered Dec 11, 2014 at 15:30

faby

7,6043 gold badges30 silver badges45 bronze badges

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

1 Comment

Kevin Over a year ago

This is great for (I suppose?) the error text, but I also want to add a class to the input field (which basically add's a red border, as seen in the larger text box). I don't think errorPlacement can handle that, am I right?

Collectives™ on Stack Overflow

Change class of input [type=text] on JQuery validation error

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related