Skip to content
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
Closed

Highlight/unhighlight parent element of multiple fields #268

RichardLindsay opened this issue Nov 29, 2011 · 4 comments

Comments

@RichardLindsay
Copy link

@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
Copy link
Collaborator

@jzaefferer jzaefferer commented Nov 29, 2011

Could you provide an example of your setup?

@RichardLindsay
Copy link
Author

@RichardLindsay 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
Copy link

@Scott8586 Scott8586 commented Aug 17, 2012

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

@jzaefferer
Copy link
Collaborator

@jzaefferer 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
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants