JQuery validation : How to check items in multiple select

Question

I have a form using JQuery validation plugin.

<label>
    <input name="Distribution[]" type="checkbox" id="dist_europe" class="required minlength:1" value="Europe" />  Europe 
</label>

<select name="Europe[]" size="5" multiple id="Europe">
   <option value='Albania'>Albania</option>
   <option value='Andorra'>Andorra</option>
   <option value='Austria'>Austria</option>
</select>

I need to do 'conditional' validation. eg. If checkbox is selected, make sure at least one item in 'select option is selected'.

 $(document).ready(function(){
     $("#commentForm").validate({
      rules: {
              Europe: {
                required: "#dist_europe:checked",
                minlength: 1
              }  
      },
      messages: {
        Europe: "Please select at least 1 country"
      }
     }
})

The issue I am facing now is :

1. I am able to detect that the checkbox is selected.
2. However, I am not able to check the 'select' array, Europe[]
3. If I remove the array, and name it Europe, I will be able to detect that at least one item is selected. But, doing that will mean the backend PHP script will not be able to process the multiple select in the array.

How do I work around this? Thanks

Answer 1

When using a name like name="Europe[]", you'll need to use a string for your identifier (the identifier is the name, not the id of the element) in rules and messages, like this:

$(document).ready(function(){
     $("#commentForm").validate({
      rules: {
        'Europe[]': {
                required: "#dist_europe:checked",
                minlength: 1
              }  
      },
      messages: {
        'Europe[]': "Please select at least 1 country"
      },
     debug: true
    });
});

You can test it out here.