How to make Validate.js and Dropkick.js work together

Question

I'm trying to make them work together but obviously due to dropkick hiding the select tag where I have the class required for the validate.js it isn't validating properly.

HTML:

 <select id="element_3" name="element_3" class="required select">
  <option value="" selected="selected">Please select</option>
  <option value="Hatch">Hatch</option>
  <option value="Clubman">Clubman</option>
  <option value="Convertible">Convertible</option>
  <option value="Countryman">Countryman</option>
  <option value="Coupe">Coup&eacute;</option>
  <option value="Roadster">Roadster</option>
  <option value="Paceman">Paceman</option>
  <option value="No particular model of interest">No particular model of interest</option>
  <option value="Other/New Model">Other/New Model</option>
 </select>

So with dropkick.js this html obviously is removed with the class required which makes it a bit of a problem.

I was wondering if anyone had a solution to this?

Thanks

Answer 1

Since the original <select></select> element is hidden by Dropkick, it's ignored by jQuery Validate, although still being used in the background for the form data.

You simply have to enable validation of hidden elements using the ignore option.

$('#myform').validate({
    // whatever other options, rules, callbacks,
    ignore: []
});

See this answer for the proper usage of the ignore option.

Answer 2

You can validate the select elements as following:

$('#myform').validate({
    // whatever other options, rules, callbacks,
    ignore: ":hidden:not(#id_of_select_element_1):not(#id_of_select_element_2)"
});