Question

我正在开发一个带有jQuery Validate（http://bassistance.de/jquery-plugins/jquery-plugin-validation/）的项目，如果点击某些selects，会显示一些checkboxes。

复选框组是必需的，但我只想要显示所需的SELECT。

我在展示addClass("required")时尝试SELECT，但这不起作用。

我搜索过整个网络，或者感觉如何，但我找不到任何解决方案。

是否可以仅验证可见SELECTs或我应该如何执行此操作？

提前谢谢。

*更新* 请参阅我的示例：http://jsfiddle.net/mtLZG/17/

Answer 1

使用此代码即可：

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

我改变了一点你的标记，以便它更好一点。如果它按预期工作，请看小提琴。

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

Answer 2

将验证码设置为

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

只要忽略隐藏的选择，它应该处理得很好。当然，选择验证也存在其他潜在问题。

Answer 3

我意识到这是一个较老的问题，但我相信这个答案对读者来说是值得的，因为jQuery Validate（since plugin version 1.9.0）现在默认忽略隐藏字段。

这主要是OP的jQuery，删除了所有不必要的行，.live()更新为更现代的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
    });

});

为了实现此目的，还需要对您的HTML应用以下更改：

1）select元素需要name属性，否则Validate插件会忽略它。

2）select元素需要class='required'来分配规则。（只要隐藏了元素，现在就会自动忽略它。）

3）首先option需要value=""属性来告诉插件第一项不是有效选项。

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

工作演示： http://jsfiddle.net/ZLXuU/

一般说明：

1）Use .validate() 在DOM准备好初始化插件 ONCE 。

2）永远不需要再次调用.validate()，因为它只重新初始化插件。 Use .valid() 测试表单的有效性并触发任何错误消息。

3）ignore: ":hidden"现在是Validate版本1.9.0 +
的默认选项

jQuery验证，验证select：visible

3 个答案: