CODEWITHSUNDEEP
javascriptjqueryjquery-validate
Tom
Tom

Reputation: 12988

jQuery validate - alter css of invalid elements

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

});

Upvotes: 1

Views: 2140

Answers (2)

Bhavesh
Bhavesh

Reputation: 123

refer this link

jQuery validation plugin - no error messages instead custom backgrounds

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

Upvotes: 0

Liviu
Liviu

Reputation: 452

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

Upvotes: 3

Related Questions