I have found a possible bug and a possible solution. When I validate
my form select box, its label goes red (gets the error class added) as
does the element itself. When I update my selected value, the label
disappears altogether.
Work around:
errorElement: "em",
If I set errorElement to something other than label I get the expected
result (label remains and error class is removed).
I decided to have a quick look at your source code and found that the
change shown below to the errorsFor function filters out any non-
generated labels from being removed.
You may have a better solution, if you do please share :).
I hope this helps someone else.
//
*******************************************************************************************************************************
// Filename: jquery.validate.js
//
*******************************************************************************************************************************
Original Code:
errorsFor: function(element) {
return this.errors().filter("[for='" +
this.idOrName(element) +
"']");
},
Suggested Code:
errorsFor: function(element) {
return this.errors().filter("[generated][for='" +
this.idOrName
(element) + "']");
},
//
*******************************************************************************************************************************
// Example validator:
//
*******************************************************************************************************************************
jQuery.validator.messages.required = "";
$("#criteriaForm").validate({
invalidHandler: function(form, validator) {
var errors = validator.numberOfInvalids();
if (errors) {
var message = errors == 1
? 'You missed 1 field. It has been highlighted'
: 'You missed ' + errors + ' fields. They have been
highlighted';
$("div.errorText span").html(message);
$("div.errorText").show();
} else {
$("div.errorText").hide();
}
},
highlight: function(element, errorClass) {
$(element).addClass(errorClass);
$(element.form).find("label[for=" + element.id + "]")
.addClass(errorClass);
},
unhighlight: function(element, errorClass) {
$(element).removeClass(errorClass);
$(element.form).find("label[for=" + element.id + "]")
.removeClass(errorClass);
},
ignoreTitle: true,
//errorElement: "em",
rules: {
selMyAnswer: {
required: true
}
}
});
//
*******************************************************************************************************************************
// Example HTML:
//
*******************************************************************************************************************************
<label for="selReviewerConcerns"><br />This is the label
that gets highlighted when there is nothing selected?</label><br />
<select name="selMyAnswer" id="selMyAnswer">
<option value="" - Specify -</option>
<option value="Y">Yes</option>
<option value="N" >No</option>
</select>
