Geek Answers Handbook

How to check multiple selections with jquery validate and Chosen?

I can test multiple selections with jquery-validate and created a fiddle as a demo. Remove the selection from the selected object by holding Ctrl and click on the selection to see the effect.

<form id="myform"> <select id="id_deals-1-sales_item" class="multi_select_mandatory" name="deals-1-sales_item" multiple="multiple"> <option value="1">Hotel 3 Star</option> <option selected="selected" value="2">Hotel 4 Star</option> </select> </form> $(document).ready(function() { var validator = $('#myform').validate({ // options rules: { "deals-1-sales_item": "required", }, //ignore: ':hidden:not("#id_deals-1-sales_item")' }); });

But as soon as I select the multi selector, it stops working: see fiddle .

 $('#id_deals-1-sales_item').chosen();

During research, I found that someone tried this instead of jquery multiselect instead of the selected one. Hidden elements seem to be ignored when checking jquery. I tried to apply this solution, but since Chosen had different methods, I was stuck (multiselection does not exist in the selected)

Is there any jQuery guru that could point me in the right direction? In addition, I would prefer a solution based on classes rather than based on field names. Like this:

This is the solution that I came up halfway through. But I don’t know how to continue ??? .

 $.validator.addMethod("needsSelection", function(value, element) { return $(element).???.length > 0; }); var validator = $('#myform').validate({ }); $('#myform').find('select.multi_select_mandatory').each(function(){ $(this).change(function(){ $(this).valid(); }); $(this).rules('add', { needsSelection: "" }); });

Decision:

With the eicto solution below, I was able to create a class based instead of a solution based on a field name. This is especially useful when you have dynamic elements that you want to check immediately without sending anything to the server.

  var validator = $('#deal_modal_form').validate({ // options ignore: ':hidden:not(.chzn-done)' }); $('#myform').find('select.multi_select_mandatory').each(function(){ $(this).chosen().change(function(){ $(this).valid(); }); $(this).rules('add', { required: true, }); });
+6
source share
2 answers

This works for me:

 $(document).ready(function() {   var validator = $('#myform').validate({     // options     rules: {       "deals-1-sales_item": "required",     },     ignore: ':hidden:not(.chzn-done)'   });   var checkerrors = function() {     validator.form();   };   var chosen = $('#id_deals-1-sales_item').chosen().change(checkerrors); });​

The idea is to check the form manually with every change.

Demo

+4
source

I wrote my solution using @eicto and @kave solutions as follows:

  $.validator.addMethod("multiSelectRequired", function (value, element) { return element.length > 0; }); $("#aspnetForm").find('select.multi_select_mandatory').each(function () { $(this).change(function () { $(this).valid(); }); $(this).rules('add', { 'multiSelectRequired': true }); });

When initializing the plugin, I add `ignoe: [] so as not to ignore the hidden input from the check.

I use a special plugin for my bootstrap project called bootstrap-multiselect to select checkboxes - https://github.com/davidstutz/bootstrap-multiselcet

0
source

More articles:


All Articles