Use the
highlight
and
unhighlight
methods to modify the element:
jQuery("form[class^='wpcf7-form']").validate({
rules:{
...
},
submitHandler: function(form) {
form.submit();
},
highlight: function(element) {
$(element).css('background', '#ffdddd');
},
unhighlight: function(element) {
$(element).css('background', '#ffffff');
}
});
Alternatively, use the
errorClass
to specify a CSS class which will be applied to invalid elements:
jQuery("form[class^='wpcf7-form']").validate({
rules:{
...
},
errorClass: "invalid"
});
input.invalid, textarea.invalid, select.invalid
{
background-color: #ffdddd;
}
.validate() | jQuery Validation Plugin[
^]