jquery validator - 仅验证可见元素

发布于 2024-12-03 11:35:51 字数 1245 浏览 0 评论 0原文

我有一个隐藏/显示 div 的单选按钮。所有可见元素都是“必需的”,但是在验证规则之后添加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>

如果选中“成人”,我希望能够提交仅提供姓名的表格...有什么想法吗? :)

I have a radiobutton that hides/shows a div. All visible elements are "required", but adding ignore: ":hidden" after the validation rules, doesn't work...
Here's the code:

<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>

I want to be able to submit the form giving only name if "Adult" is checked... Any ideas? :)

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

暗地喜欢 2024-12-10 11:35:51

您可以在 required依赖表达式 code> 规则让它们忽略不可见的元素:

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

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

编辑: ignore 也可以,但它是一个选项,而不是规则,所以你应该写:

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

You can specify dependency expressions in your required rules to have them ignore the elements if they're not visible:

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

You can see the results in this fiddle.

EDIT: ignore will also work, but it's an option, not a rule, so you should write:

$("#myForm").validate({
    ignore: ":hidden",
    rules: {
        name: "required",
        age: "required",
        height: "required"
    }
});
痞味浪人 2024-12-10 11:35:51

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

Please try ignore: ":not(:visible)" instead of ignore: ":hidden".

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文