Workaround for using jquery-validation-engine with select2 for 'required' validation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script type="text/javascript"> | |
// This is a workaround for using jquery-validation-engine with select2 for 'required' validation | |
// Since the _required validator for jquery-validation-engine uses .val() to see | |
// if there's anything in the input, we can hijack .val() for the container created by select2\ | |
// and redirect it to the value of the hidden element | |
// jquery-validation-engine throws an error if the thing we're validating doesn't have an id | |
// so we'll put one on the container created by select2 (that way, the positioning of the prompts | |
// will be correct) | |
$('#mySelector').select2('container').attr('id', 'mySelectorValidate'); | |
// Mostly lifted from http://stackoverflow.com/questions/6731153/what-are-jquery-valhooks | |
$.fn.setTypeForHook = function () { | |
this.each(function () { | |
this.type = 'mySelector'; | |
}); | |
return this; | |
}; | |
$('#mySelector').select2('container').setTypeForHook(); | |
// With the 'type' set, we can add a valhook to redirect .val() for the container | |
// to .val() from the hidden input | |
// select2 sets up its own 'val' method, so we'll use that in this case | |
$.valHooks['mySelector'] = { | |
get: function (el) { | |
return $('#mySelector').select2("val"); | |
}, | |
set: function (el, val) { | |
$('#mySelector').select2("val", val); | |
} | |
}; | |
</script> | |
<div class="mySelectorContainer" id="tcuSelection"> | |
<!-- select2 will copy the validate[required] class to the container it creates --> | |
<input type="hidden" id="mySelector" name="TCUId" class="mySelector validate[required]"/> | |
</div> |
I resolved this doing the following, in select2.js - line 341:
if (this.indexOf("select2-") !== 0 && this !== 'validate[required]') {
@playmono will this hack work for select2 version 4 (beta)
I could not find the line in select2.js
i am use the select2.min.js ; so what are the changes i do
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi! I've find only your suggest over the net for this problem, but I should need an explanation.
Could you give an example how to apply your code if I have an asp.net ListBox where I have apply the jquery select2 ?