New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Highlight/unhighlight parent element of multiple fields #268

Closed
RichardLindsay opened this Issue Nov 29, 2011 · 4 comments

Comments

Projects
None yet
3 participants
@RichardLindsay

RichardLindsay commented Nov 29, 2011

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

This comment has been minimized.

Collaborator

jzaefferer commented Nov 29, 2011

Could you provide an example of your setup?

@RichardLindsay

This comment has been minimized.

RichardLindsay commented Nov 29, 2011

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

This comment has been minimized.

Scott8586 commented Aug 17, 2012

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

@jzaefferer

This comment has been minimized.

Collaborator

jzaefferer commented Jun 26, 2015

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!

@jzaefferer jzaefferer closed this Jun 26, 2015

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment