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

Where is the rest of the relevant code? Your jQuery? At least show enough to construct a concise demo. — Sparky, Aug 28 '13 at 15:11
Also see this: http://stackoverflow.com/questions/13145359/how-to-use-jquery-validate-on-div-based-select-form-element?rq=1 — Sparky, Aug 28 '13 at 15:21

score 0 · Accepted Answer · edited May 23 '17 at 12:00

0

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.

edited May 23 '17 at 12:00

Community

1
1

answered Aug 28 '13 at 15:18

Sparky

98,165
25
199
285

Thanks I went with the display: block fix, however only works for one select tag – MaxwellLynn Aug 28 '13 at 15:47
@MaxwellLynn, if your solution is only working on one `select` tag, then maybe you should try mine. Otherwise, since I can't see your code, I don't know what you're talking about. – Sparky Aug 28 '13 at 16:33
Nah was just becuase i had a value on that page – MaxwellLynn Aug 29 '13 at 11:17

Rahul Gupta · Answer 2 · 2016-12-16T09:07:50.047

0

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

edited Dec 16 '16 at 09:07

answered Dec 16 '16 at 08:59

Rahul Gupta

9,775
7
56
69

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

2 Answers2