Highlight/unhighlight parent element of multiple fields

[sherwinflight]

This is a previously reported issue, but that issue was closed without a fix in 2015 (#268). Since I ran into some trouble with the same thing today I'm making a new report based on the latest version of the script.

Subject of the issue

Highlight/unhighlight parent element of multiple fields doesn't work as expected

Your environment

Latest version of JQuery Validate, latest version of jQuery, all browsers.

Steps to reproduce

• Create any two form inputs inside a single parent container.
• Use the highlight/unhighlight function to add a class to the parent element.

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");
},

Expected behaviour

• Unhighlight should run first to do any "clean up", and then the highlighting function would work as expected.

Actual behaviour

• The highlight function will add the CSS class to the parent but the unhighlight function will immediately remove it because the unhighlight function runs after the highlight function.
• Since both form elements are in the same parent container, the result is that the parent container will never have the proper class applied if any of the form elements in that container are valid.

Suggested solution

The problem can be fixed by moving the unhighlight code in the defaultShowErrors above the highlight code.

Current code for the defaultShowErrors function:

		defaultShowErrors: function() {
			var i, elements, error;
			for ( i = 0; this.errorList[ i ]; i++ ) {
				error = this.errorList[ i ];
				if ( 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 ( i = 0; this.successList[ i ]; i++ ) {
					this.showLabel( this.successList[ i ] );
				}
			}
			if ( this.settings.unhighlight ) {
				for ( 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();
		},

Version of that functions that resolves this issue:

		defaultShowErrors: function() {
			var i, elements, error;
			if ( this.settings.unhighlight ) {
				for ( i = 0, elements = this.validElements(); elements[ i ]; i++ ) {
					this.settings.unhighlight.call( this, elements[ i ], this.settings.errorClass, this.settings.validClass );
				}
			}
			for ( i = 0; this.errorList[ i ]; i++ ) {
				error = this.errorList[ i ];
				if ( 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 ( 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();
		},

[github-actions]

This issue/proposal has been automatically marked as idle and stale because it hasn't had any recent activity. It will be automatically closed if no further activity occurs. If you think this is wrong, or the problem still persists, just pop a reply in the comments and one of the maintainers will (try!) to follow up.
Thank you for contributing :)