Skip to content
Browse files

Fix for ValidationEngine &hiding errors on change.

Copying class attribute to container causes and issue with the JQuery
ValidationEngine. In order to prevent double validation checking, a
simple replace call to copy all but the actual validation[] class.

Also, added a blurOnChange default setting, to allow people to trigger
and blur() event in case of using JQuery ValidationEngine  in order to
immediately hide the validation error message when selecting an option.
  • Loading branch information...
1 parent 222fa7e commit 039f6b5de9095c09fe31da9ce755e0d3ff33c6fa Troy Zarger committed Sep 4, 2012
Showing with 8 additions and 2 deletions.
  1. +8 −2 select2.js
10 select2.js
@@ -568,7 +568,7 @@
this.body = thunk(function() { return opts.element.closest("body"); });
if (opts.element.attr("class") !== undefined) {
- this.container.addClass(opts.element.attr("class"));
+ this.container.addClass(opts.element.attr("class").replace(/validate\[[\S ]+] ?/, ''));
@@ -833,6 +833,11 @@
// some validation frameworks ignore the change event and listen instead to keyup, click for selects
// so here we trigger the click event manually;
+ // ValidationEngine ignorea the change event and listens instead to blur
+ // so here we trigger the blur event manually if so desired
+ if (this.opts.blurOnChange)
ivaynberg added a note Sep 5, 2012

seems strange to fire a blur from change. why not fire change? or fire blur when the component is actually blurred....

tzarger added a note Sep 5, 2012

This is a specific fix for Jquery ValidationEngine. It attaches a blur event for text, select, etc. So therefor a change event is never heard.

If you never fire the blur event, the validation message does not disappear until you click to submit the form. If all the other validation messages disappear on blur events of the text elements, it seems strange like the select in the select2 drop down did not take as it is the last and only (if one on the form) validation message that never goes away. So you may think you need to do something else to make that disappear and may not be obvious to hit the submit button.

that is the reason I added a configuration option (blurOnChange) as it is not a normal solution, however you would need to emit that event in order to have Jquery ValidationEngine work as the same behavior as all other validation.

Keep in mind, you fire a blur event on the actual element and thus nothing visually blurs.

I agree, it seems a bit strange. Without going into the plumbing with validationEngine, this is an easy fix (not really a fix, just an enhancement to expand compatibility), Granted I have a pull request to updating prompt position on the select2 element when the screen is resized. It could be made to like to a change event if you feel it is better to request an update there. Please let me know your thoughts.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+ this.opts.element.blur();
@@ -2366,7 +2371,8 @@
return markup.replace(/&/g, "&");
return markup;
- }
+ },
+ blurOnChange: false
// exports

0 comments on commit 039f6b5

Please sign in to comment.
Something went wrong with that request. Please try again.