jquery 单选按钮的验证规则

Question

    $('#myform').validate({
    // other options & rules
});

我正在使用这些规则使用字段名称验证 myform 的各个字段。现在我还有几个单选按钮，我需要使用规则对其应用验证："atleast one of the radio buttons need to be selected"。我还需要提到这个 .Myform 是流的一种形式和 stream_details 的嵌套形式，因为我的关联是这样的 Stream has_many StreamDetail。单选按钮属于嵌套形式。这里的问题是我在检查元素上看到的单选按钮的名称有点奇怪，比如 "stream[stream_details_attributes][0][show_details][0]"。无法了解如何对此应用验证。我虽然尝试在按钮上放置一个 class 并在其上添加规则。不过没用。

Answer 1

试一试

<input type="radio" name="radioButtonName" value="1" />First
<input type="radio" name="radioButtonName" value="2" />Second

规则：

{
    radioButtonName:"required"    
}

Answer 2

你可以用这个

$(".selector").validate({
rules: {
// simple rule, converted to {required:true}
name: "required",
// compound rule
email: {
required: true,
email: true
}
}
});

有关更多选项，您可以查看 jquery 验证插件站点

http://jqueryvalidation.org/validate/

Answer 3

检查这个：-

<!DOCTYPE html>
<html>
<head>
    <title>Index</title>
    <style type="text/css">
        input.error 
        {
            border: solid 1px red;  
            color: Red;    
        }
    </style>
     <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.2.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#form").validate({
                rules: {
                    accountType: "required"
                },
                messages: {
                    accountType: "You must select an account type"
                }
            });
        });

    </script>
</head>
<body>
    <div>
        <form id="form" method="post" action="/">
            <label>Select an Account Type</label>
            <p>
                <input type="radio" name="accountType" value="1" id="accountType_C" /><label for="accountType_C" >Coder</label>
            </p>
            <p>
                <input type="radio" name="accountType" value="0" id="accountType_S" /><label for="accountType_S">Surreptitious Ninja</label>
            </p>
            <input type="submit" />
        </form>
    </div>
</body>
</html>

Answer 4

有几种方法可以做到这一点。你的 OP 很难说出来，但也许#3 就是你需要的...

1. 当 name 在群组中的每个收音机上相同 ...

    <input type="radio" name="radioname" /> <label>Yes</label>
    <input type="radio" name="radioname" /> <label>No</label>
    <input type="radio" name="radioname" /> <label>Maybe</label>

然后你可以简单地在这个名字上声明required规则，并且需要一个组外的无线电。（因为是type="radio"共用一个name（同组），所以一开始只能选一个。）

$('#myform').validate({
    // other options,
    rules: {
        radioname: { // <- NAME of every radio in the same group
            required: true
        }
    }
});

2. 当 name 在组中的每个无线电上不同 ...

    <input type="radio" name="foo" class="mygroup" /> <label>Yes</label>
    <input type="radio" name="bar" class="mygroup" /> <label>No</label>
    <input type="radio" name="foobar" class="mygroup" /> <label>Maybe</label>

然后您可以使用属于 the plugin's additional-methods.js file 的 require_from_group 规则。第一个参数告诉它需要组中的多少个。

$('#myform').validate({
    // other options,
    rules: {
        foo: {
            require_from_group: [1, '.mygroup']
        },
        bar: {
            require_from_group: [1, '.mygroup']
        },
        foobar: {
            require_from_group: [1, '.mygroup']
        }
    }
});

3. 当 name 在组中的每个收音机上不同并且您不知道 name 属性（虽然每个 name 仍然是强制性的 ）。

    <input type="radio" name="foo" class="mygroup" /> <label>Yes</label>
    <input type="radio" name="bar" class="mygroup" /> <label>No</label>
    <input type="radio" name="foobar" class="mygroup" /> <label>Maybe</label>

然后您将使用 .rules('add') 方法声明规则。此方法可以附加到 any 选择器，因此您不需要知道 name 属性。（但是，即使您在这里没有使用 name，插件要求考虑验证的每个输入都包含一个 name.)

$('#myform').validate({
    // other options
});

$('.mygroup').each(function () {
    $(this).rules('add', {
        require_from_group: [1, $(this)]
    });
});

工作演示：http://jsfiddle.net/05qm3r4m/

您可以使用 the groups option within .validate() to combine the error messages into one single message. Then use the errorPlacement option 将其精确放置在您的布局中。

包含组合消息的演示：http://jsfiddle.net/05qm3r4m/1/

jquery 单选按钮的验证规则

jquery validation rules for radio buttons

javascript

jquery

radio-button

jquery-validate

你可以用这个

有关更多选项，您可以查看 jquery 验证插件站点