jquery validation does not work with SelectBoxIt component

Question

I have installed SelectBoxIt in order to change my select box look&feel, but I have found the problem is that jquery validation does not work, for example if this field is required.

It is no necessary me to post the code because it is easy to reproduce (I tried but stackoverflow page hung). Just include jquery.validate.min.js and jquery.selectBoxIt.min.js, then create a dropdownlist with some elements, having the first one, an empty value.

The rules to define are:

                'Cliente[cnaid]': {
                    required: true,
                    min: 1
                },

where Cliente[cnaid] is the name of the select box.

Any hint will be greatly appreciated,

Thanks Jaime

Answer 1

jQuery Validate works by default only on visible form elements. SelectBoxIt hides the default select and displays one built out of non-form elements. What you need to do is add the option to your validate call to allow it to validate hidden elements:

$('form').validate({
  ignore:'', //i.e. do not ignore hidden elements
  //rules, etc
});