StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I realize this is an older question, but I believe this answer is worthwhile to the reader since jQuery Validate (<a href="http://bassistance.de/2011/10/07/release-validation-plugin-1-9-0/" rel="nofollow">since plugin version 1.9.0</a>) now ignores hidden fields <em>by default</em>.</p> <p>This is mostly the OP's jQuery with all the unnecessary lines removed, and <code>.live()</code> updated to the more modern <a href="http://api.jquery.com/on/" rel="nofollow">jQuery <code>.on()</code></a>.</p> <pre><code>$(document).ready(function () { $('input:checked').parent().addClass("visible"); $(':checkbox').on("change", function () { $(this).parent().toggleClass("visible"); }); // Initialize Validate plugin; .validate() called ONCE $('form').validate({ ignore: ":hidden" // only use this option for plugin version below 1.9.0 }); }); </code></pre> <p>In order for this to work, the following changes also need to be applied to your HTML:</p> <p>1) <code>select</code> element needs a <code>name</code> attribute or the Validate plugin will ignore it.</p> <p>2) <code>select</code> element needs <code>class='required'</code> to assign the rule. (This is now automatically ignored whenever the element is hidden.)</p> <p>3) First <code>option</code> needs a <code>value=""</code> attribute to tell the plugin that the first item is not a valid option.</p> <pre><code><select class="required" name="suboption1"> <option selected="selected" value="">Select an option</option> <option>Sub-Option 1</option> ... </select> </code></pre> <p><strong>Working Demo:</strong> <a href="http://jsfiddle.net/ZLXuU/" rel="nofollow">http://jsfiddle.net/ZLXuU/</a></p> <p><strong>General Notes:</strong></p> <p>1) <a href="http://docs.jquery.com/Plugins/Validation/validate" rel="nofollow">Use <code>.validate()</code></a> to <em>initialize</em> the plugin <em>ONCE</em> on DOM ready.</p> <p>2) There is never a need to call <code>.validate()</code> again since it only re-initializes the plugin. <a href="http://docs.jquery.com/Plugins/Validation/valid" rel="nofollow">Use <code>.valid()</code></a> to <em>test</em> the form's validity and trigger any error messages.</p> <p>3) <code>ignore: ":hidden"</code> is now a <em>default</em> option for Validate version 1.9.0+</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload