Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Fix for ValidationEngine & hiding errors on change. #374

Merged
merged 1 commit into from

3 participants

@tzarger

Copying class attribute to container causes and issue with the JQuery ValidationEngine. In order to prevent double validation, a simple regex 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.

Troy Zarger 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.
039f6b5
@ivaynberg

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

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.

@ivaynberg ivaynberg merged commit cb44a86 into select2:master
@DevXen

I'm using the Jquery ValidationEngine. but can't figure out how to get it to validate if select2 has anything selected or not?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Sep 4, 2012
  1. Fix for ValidationEngine &hiding errors on change.

    Troy Zarger authored
    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.
This page is out of date. Refresh to see the latest.
Showing with 8 additions and 2 deletions.
  1. +8 −2 select2.js
View
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 ]+] ?/, ''));
}
this.container.css(evaluate(opts.containerCss));
@@ -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
this.opts.element.click();
+
+ // 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)
+ this.opts.element.blur();
},
@@ -2366,7 +2371,8 @@
return markup.replace(/&/g, "&");
}
return markup;
- }
+ },
+ blurOnChange: false
};
// exports
Something went wrong with that request. Please try again.