My default validator settings include displaying a red error message when validation fails.
However, it works on Input and textareas, but not on select.
$.validator.setDefaults({
ignore: "",
errorPlacement: function(error, element) {
element.attr('title', error.addClass('error').text());
element.attr('placeholder', error.addClass('error').text());
element.attr('title', error.text());
},
highlight: function(element, errorClass, validClass) {
$(element).addClass(errorClass).addClass('error').removeClass(validClass).removeClass('valid');
$(element.form).find("input[id=" + element.id + "]").addClass(errorClass).addClass('error');
$(element.form).find("select[id=" + element.id + "]").addClass(errorClass).addClass('error');
},
unhighlight: function(element, errorClass, validClass) {
$(element).removeClass(errorClass).removeClass('error').addClass(validClass).addClass('valid');
$(element.form).find("input[id=" + element.id + "]").removeClass(errorClass).addClass(validClass).addClass('valid');
$(element.form).find("select[id=" + element.id + "]").removeClass(errorClass).addClass(validClass).addClass('valid');
}
});
CSS
.error {
color:#F00 !important;border:1px solid red !important;
}
.valid {
color:#060 !important;
}