CODEWITHSUNDEEP
jqueryhtmlcssjquery-validatejquery-dropkick
MaxwellLynn
MaxwellLynn

Reputation: 968

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

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

Upvotes: -1

Views: 546

Answers (2)

Rahul Gupta
Rahul Gupta

Reputation: 10141

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)"
});

Upvotes: 0

Sparky
Sparky

Reputation: 98738

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.

Upvotes: 0

Related Questions