CODEWITHSUNDEEP
javascriptjqueryformsjquery-validate
user648340
user648340

Reputation:

jQuery validation: hide error messages and change invalid fields background color

Here's a sample form.
How can I customize the form so it doesn't display any error messages and instead changes invalid fields background color?

Tried this to no avail:

$("form").validate({
  errorPlacement: function(error, element) {
     $(element.error).css("background","red");
   }
 })

Upvotes: 1

Views: 5544

Answers (2)

Mori
Mori

Reputation: 6770

All you need is two lines of CSS:

label.error {display: none !important;}
.error {background: #F00;}

Upvotes: 5

techfoobar
techfoobar

Reputation: 66663

You can do this by handling the invalidHandler callback in validate plugin:

Code:

$('#commentForm').validate({
    invalidHandler: function() {
        setTimeout(customizeErrors, 200);
    }
});

function customizeErrors() {
    $('label.error').each(function() {
        $(this).prev().addClass('has-error');
        $(this).prev().attr('title', $(this).text());
    });
    $('label.error').remove();
}

Demo: http://jsfiddle.net/2LwTa/

Note: The error message should ideally not be only a tooltip, as that would mean someone using just the keyboard will never see it.

Upvotes: 0

Related Questions