jQuery Validate, validate select:visible

I'm working on a project with jQuery Validate (http://bassistance.de/jquery-plugins/jquery-plugin-validation/), where some 开发者_C百科selects are displayed if you click on some checkboxes.

The checkboxes group is required, but I only want to make the visible SELECT required.

I tried to addClass("required") when I show the SELECT, but that didn't work.

I've searched the entire web, or that how it feels that it, but I can't find any solution.

Is it possible to validate only the visible SELECTs or how should I do this?

Thank you in advance.

* UPDATE * Please see this my example: http://jsfiddle.net/mtLZG/17/

with this code you are okay:

$(document).ready(function() { //Shows the sub-options, if checkboxes are selected per default $('input:checked').parent().addClass("visible");

$(':checkbox').live("change", function(){
    //Show the suboption
    $(this).parent().toggleClass("visible");
    //Add required-class to the Select
    $(this).parent().children("select").toggleClass("required");  
    //I tried to validate the form again, after the above class was added
    $('form').validate();      
});

//Validate
$('form').validate();
});

i changed a bit of your markup so that it works a little better. Look at the fiddle if it works as expected.

http://jsfiddle.net/mtLZG/18/

Setting up the validation code as

$('form').validate({
   ignore: ":hidden"
});

It should handle things just fine as far as ignoring hidden selects. Of course, there are other potential issues with select validation too.

I realize this is an older question, but I believe this answer is worthwhile to the reader since jQuery Validate (since plugin version 1.9.0) now ignores hidden fields by default.

This is mostly the OP's jQuery with all the unnecessary lines removed, and .live() updated to the more modern jQuery .on().

$(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
    });

});

In order for this to work, the following changes also need to be applied to your HTML:

1) select element needs a name attribute or the Validate plugin will ignore it.

2) select element needs class='required' to assign the rule. (This is now automatically ignored whenever the element is hidden.)

3) First option needs a value="" attribute to tell the plugin that the first item is not a valid option.

<select class="required" name="suboption1">
    <option selected="selected" value="">Select an option</option>
    <option>Sub-Option 1</option>
    ...
</select>

Working Demo: http://jsfiddle.net/ZLXuU/

General Notes:

1) Use .validate() to initialize the plugin ONCE on DOM ready.

2) There is never a need to call .validate() again since it only re-initializes the plugin. Use .valid() to test the form's validity and trigger any error messages.

3) ignore: ":hidden" is now a default option for Validate version 1.9.0+