jQuery validate - alter css of invalid elements

Question

I am using the jQuery.validate plugin but I would like to change the background color of the input field that has failed rather than displaying a message? Is there anything like this already built in to the plugin or will I need to add something to make it work?

Here's the code I have so far:

$("#myForm").validate({
    debug: false,
    rules: {
        YourName: {
            required: true,
        },
    },
//I want to highlight the failed element here by changing the background color
    submitHandler: function(form) {

    $.post('projectform.php', $("#myForm").serialize(), function(data)
        {
          $('#myDiv').html(data);       
        });
      }

});

Liviu · Accepted Answer · 2012-03-03 09:12:29Z

3

try setting custom functions like

$("#myForm").validate({
            errorPlacement: function(error, element){
                element.addClass('errorClass');
            },
            unhighlight: function(element, errorClass, validClass) {
               $(element).removeClass('errorClass');
            }
}

where errorClass is a class added to the inputs when it's not valid

answered Mar 3, 2012 at 9:12

Liviu

4621 gold badge6 silver badges14 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 12:19:14Z

0

refer this link

jQuery validation plugin - no error messages instead custom backgrounds

you can change ".error" class to customize your input field

edited May 23, 2017 at 12:19

CommunityBot

11 silver badge

answered Mar 3, 2012 at 9:13

Bhavesh

1239 bronze badges

Collectives™ on Stack Overflow

jQuery validate - alter css of invalid elements

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related