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>
On Feb 26, 10:45 pm, LVR <lvroun...@gmail.com> wrote:
> First, let me say my skill level with jQuery and javascript is low.
> Apparently too low to figure this out. I am currently using
> theValidateplugin for form validation. It works well, except for this
> problem: when an element validates, the label element disappears.
> I'm using the following code straight from this page
> :http://docs.jquery.com/Plugins/Validation/validate#toptions
>
> $(".selector").validate({
> 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);
> }
>
> });
>
> My goal is to use the labels as error indicators, turning them red on
> error. The code above, together with some css, works great for this.
> But when the error is corrected, the label disappears completely
> (theValidateplugin adds display:none to the label tag).
>
> To correct this Jorn said:
> Don't add the error class to the label. The validation plugin searches
> for the error label based on that error class - adding it to the
> actual label causes the label to disappear.
> You could add a different class to the actual label so that the error
> label can be hidden or removed entirely (via errorPlacement, or
> showErrors).
>
> I have tried this to the best of my limited ability - without
> success. Can anyone give me a coded example of this? Should I not be
> using the code sample above? I can't figure out how to highlight the
> label on error, but not "add the error class to the label." Again,
> I'm somewhat javascript-challenged, so code examples would be
> appreciated.
>
> Thanks!
