public

Workaround for using jquery-validation-engine with select2 for 'required' validation

  • Download Gist
jquery-validation-engine_with_select2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41
<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>

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 ?

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.