jQuery验证仅在选择某些单选按钮时 [英] jQuery Validation ONLY when certain radio buttons selected

问题描述

我在表单上有这么简单的验证：

I have this simple bit of validation on my form:

<script type="text/javascript">

                    $(function()
                    {
                        $("#postform").validate({
                            rules: {
                                post_title: "required",
                                post_url: "required",
                                post_code: "required",
                                post_content: "required",
                                post_tags: "required"
                            }
                        });
                    });

                    </script>

但如果没有检查某些单选按钮，我不想要post_url或post_code当我选择它们时隐藏。例如这是收音机：

BUT I don't want to require post_url or post_code if certain radio buttons are not checked as they get hidden when I select them. e.g. here are the radios:

<li><label for="r1"><input type="radio" name="post_category" id="r1" value="12" checked="checked" /> Share an Article</label></li>
                                    <li><label for="r4"><input type="radio" name="post_category" id="r4" value="14" /> Share a Link</label></li>
                                    <li><label for="r3"><input type="radio" name="post_category" id="r3" value="13" /> Share some Code</label></li

然后这是隐藏的jquery代码或显示它们：

and then this is the jquery code that hides or shows them:

<script type="text/javascript">

    jQuery(document).ready(function($)
    {
        $("input[name='post_category']").change(function()
        {
                $("#discussion-label").toggle(this.value == "12");
        });
        $("input[name='post_category']").change(function()
        {
                $("#code-container").toggle(this.value == "13");
                $("#code-label").toggle(this.value == "13");
        });
        $("input[name='post_category']").change(function()
        {
                $("#link-container").toggle(this.value == "14");
                $("#link-label").toggle(this.value == "14");
        });

        $("input#r1:checked").change();
        $("input#r3:checked").change();
        $("input#r4:checked").change();
    });

</script>

所以想法是当用户选择第一个单选按钮时，只有post_title，post_content和post_tags将是验证。如果用户选择第二个单选按钮，它也会验证post_url字段，如果他们选择第三个单选按钮，那么它将验证post_code字段但不再是post_url，反之亦然。反而适用。

So the idea is that when user chooses the first radio button only post_title, post_content, and post_tags will be validated. If the user chooses the second radio button the it wil ALSO validate the post_url field, if they choose the third radio button then it will validate the post_code field BUT NOT the post_url anymore and vice-versa.

有人可以帮忙吗？谢谢

推荐答案

您可以通过使用具有depends值的对象而不是字符串required来进行条件验证验证对象，如下所示：

You can have conditional validation by using an object with a "depends" value instead of the string "required" for your validate object, like so:

$("#postform").validate({
    rules: {
        post_title: "required",
        post_url:  {
            required: {
                depends: function() {
                    return $('input[name=post_category]:checked').val() == '14';
                }
            }
        },
        post_code: {
            required: {
                depends: function() {
                    return $('input[name=post_category]:checked').val() == '13';
                }
            }
        },
        post_content: "required",
        post_tags: "required"
    }
});

验证框架会自动使用该函数来检查验证是否应该发生。如果函数返回true，它将验证，否则不会。在这种情况下，每个功能都是查找哪个无线电被检查，然后将该无线电的值与我们需要的值进行比较，以便进行验证。

The function is automatically used by the validation framework to check if validation should occur. If the function returns true it will validate, otherwise it will not. In this case, each function is finding which of the radios is checked and then comparing that radio's value to the value we need it to have for validation to be necessary.

这篇关于jQuery验证仅在选择某些单选按钮时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！