jquery验证器 - 仅验证可见元素

时间:2011-09-08 14:44:29

标签: jquery validation hidden-fields

我有一个隐藏/显示div的radiobutton。所有可见元素都是“必需的”,但在验证规则之后添加ignore:“:hidden”不起作用... 这是代码:

<script type="text/javascript">

        $(document).ready(function(){
            $("#myForm").validate({
                rules: {
                    name: "required",
                    age: "required",
                    height: "required",
                    ignore: ":hidden"
                }
            })
        });

    </script>
</head>
<body>
    <form id="myForm" name="myForm" method="post" action="" >
        <input type="radio" name="checkAge" value="adult" onclick="$('#minorRequisites').hide();" />Adult<br/>
        <input type="radio" name="checkAge" value="minor" onclick="$('#minorRequisites').show()" checked="checked"/>Child<br/>
        Name <input id="name" name="name" type="text" /><br/>
        <div id="minorRequisites">
            Age <input id="age" name="age" type="text" /><br/>
            Height <input id="height" name="height" type="text" /><br/>
        </div>
        <input type="submit" />
    </form>
</body>

如果选中“成人”,我希望能够提交仅提供姓名的表单...任何想法? :)

2 个答案:

答案 0 :(得分:11)

您可以在required规则中指定dependency expressions,让他们忽略这些元素,如果它们不可见:

$("#myForm").validate({
    rules: {
        name: "required",
        age: {
            required: "#age:visible"
        },
        height: {
            required: "#height:visible"
        }
    }
});

您可以在this fiddle中看到结果。

编辑: ignore也可以,但它是选项,而不是规则,所以你应该写:< / p>

$("#myForm").validate({
    ignore: ":hidden",
    rules: {
        name: "required",
        age: "required",
        height: "required"
    }
});

答案 1 :(得分:0)

请尝试ignore: ":not(:visible)"而不是ignore: ":hidden"