Highlight/unhighlight parent element of multiple fields

[RichardLindsay]

Hi,

I had an issue whereby I wanted to highlight the parent DIV of multiple elements if validation failed.

I achieved this easily with:

highlight: function(element) {
$(element).closest("div").addClass("highlightError");
}

However, my issue arose when one of the fields in the DIV was correct. This meant that the highlight completely disappeared, even if other errors still remained.

To fix this I moved the unhighlight IF statement in the defaultShowErrors() function above the highlight FOR loop in the defaultShowErrors() function.

Now the highlighting remains until all fields in the parent element are correct.

I'm not sure if anyone is interested in this, I just thought i'd share it.

Cheers

[jzaefferer]

Could you provide an example of your setup?

[RichardLindsay]

Sure,

HTML

<div>
<input type="text" name="text1" id="text1">
<input type="text" name="text2" id="text2">
</div>

Validation options

errorLabelContainer: "#errorBox",
wrapper: "li",
onkeyup: false,
onfocusout: false,
onclick: false,
highlight: function(element) {
 $(element).closest("div").addClass("highlightError");
},
unhighlight: function(element) {
 $(element).closest("div").removeClass("highlightError");
},

Original validate.js defaultShowErrors() function

defaultShowErrors: function() {
for ( var i = 0; this.errorList[i]; i++ ) {
var error = this.errorList[i];
this.settings.highlight && this.settings.highlight.call( this, error.element, this.settings.errorClass, this.settings.validClass );
this.showLabel( error.element, error.message );
}
if( this.errorList.length ) {
this.toShow = this.toShow.add( this.containers );
}
if (this.settings.success) {
for ( var i = 0; this.successList[i]; i++ ) {
this.showLabel( this.successList[i] );
}
}
if (this.settings.unhighlight) {
for ( var i = 0, elements = this.validElements(); elements[i]; i++ ) {
this.settings.unhighlight.call( this, elements[i], this.settings.errorClass, this.settings.validClass );
}
}
this.toHide = this.toHide.not( this.toShow );
this.hideErrors();
this.addWrapper( this.toShow ).show();
},

Amended validate.js defaultShowErrors() function

defaultShowErrors: function() {
// Moved the unhighlight section above the highlight section.  This allows the errorClass to remain if another input within the same div is wrong.
if (this.settings.unhighlight) {
for ( var i = 0, elements = this.validElements(); elements[i]; i++ ) {
this.settings.unhighlight.call( this, elements[i], this.settings.errorClass, this.settings.validClass );
}
}
for ( var i = 0; this.errorList[i]; i++ ) {
var error = this.errorList[i];
this.settings.highlight && this.settings.highlight.call( this, error.element, this.settings.errorClass, this.settings.validClass );
this.showLabel( error.element, error.message );
}
if( this.errorList.length ) {
this.toShow = this.toShow.add( this.containers );
}
if (this.settings.success) {
for ( var i = 0; this.successList[i]; i++ ) {
this.showLabel( this.successList[i] );
}
}
this.toHide = this.toHide.not( this.toShow );
this.hideErrors();
this.addWrapper( this.toShow ).show();
},

Cheers

[Scott8586]

Thanks, I needed exactly this patch. It would be great to have this as an option.

[jzaefferer]

I'm sorry for the lack of activity on this issue. Instead of leaving it open any longer, I decided to close old issues without trying to address them, to longer give the false impression that it will get addressed eventually.

To the reporter (or anyone else interested in this issue): If you're affected by the same issue, consider opening a new issue, with a testpage that shows the issue. Even better, try to fix the issue yourself, and improve the project by sending a pull request. This may seem daunting at first, but you'll likely learn some useful skills that you can apply elsewhere as well. And you can help keep this project alive. We've documented how to do these things, too. A patch is worth a thousand issues!