javascript 单选按钮的 jquery 验证规则

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/27728270/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 07:54:06  来源:igfitidea点击:

jquery validation rules for radio buttons

javascriptjqueryradio-buttonjquery-validate

提问by Vivek Tripathi

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

I am using these rules for validating various fields of myform using there field names. Now I also have a couple of radio buttons to which i need to apply validation on with the rule: "atleast one of the radio buttons need to be selected". Also I need to mention this .Myform is a form for streams and a nested form for stream_details as my association goes like this Stream has_many StreamDetail. And the radio buttons fall under the nested form. The problem here is the name of the radio button i got on inspect element was something weird like "stream[stream_details_attributes][0][show_details][0]". Can't get how to apply validation on this. I though tried to put a class on the buttons and add rules on it. didn't work though.

我正在使用这些规则来使用字段名称验证 myform 的各个字段。现在我还有几个单选按钮,我需要使用规则对其应用验证:“至少需要选择一个单选按钮”。另外我需要提到这个 .Myform 是流的形式和 stream_details 的嵌套形式,因为我的关联就像这个 Stream has_many StreamDetail。单选按钮属于嵌套表单。这里的问题是我在检查元素上得到的单选按钮的名称有点奇怪,比如“stream[stream_details_attributes][0][show_details][0]”。无法获得如何对此应用验证。我虽然尝试在按钮上放置一个类并在其上添加规则。虽然没有用。

回答by Sparky

There are a few ways this can be done. It's hard to tell by your OP, but maybe #3 is what you'd need...

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





1.When the nameis the sameon every radio in the group...

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>

Then you can simply declare the requiredrule on this name and one radio out of the group will be required. (Since it's a type="radio"sharing a name(same group), only one can be selected in the first place.)

然后,您可以简单地声明required此名称的规则,并且将需要该组之外的一台收音机。(由于是type="radio"共享a name(同组),所以一开始只能选一个。)

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




2.When the nameis differenton each radio in the group...

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>

Then you can use the require_from_grouprule that is part of the plugin's additional-methods.jsfile. The first parameter tells it how many from the group are required.

然后你可以使用插件文件中require_from_group规则。第一个参数告诉它需要多少组。additional-methods.js

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




3.When the nameis differenton each radio in the group AND you do not know the nameattribute (although a nameon each is still mandatory).

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>

Then you would declare the rules using the .rules('add')method. This method can be attached to anyselector so you would not need to knowthe nameattributes. (However, even though you're not using the namehere, the plugin mandatesthat every input considered for validation contains a name.)

然后您将使用该.rules('add')方法声明规则。这种方法可以连接到任何选择,所以你就不需要知道name属性。(但是,即使您不使用name此处,插件也要求考虑进行验证的每个输入都包含name.)

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

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

Working DEMO: http://jsfiddle.net/05qm3r4m/

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

You can use the groupsoptionwithin .validate()to combine the error messages into one single message. Then use the errorPlacementoptionto place it precisely within your layout.

您可以使用groups选项.validate()的错误消息组合成一个单一的消息。然后使用errorPlacement选项将其精确放置在您的布局中。

DEMO with combined messages: http://jsfiddle.net/05qm3r4m/1/

带有组合消息的演示:http: //jsfiddle.net/05qm3r4m/1/

回答by Rohan Kumar

Try it like like

像这样尝试

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

Rule:

规则:

{
    radioButtonName:"required"    
}

回答by Hoja.M.A

You could use this

你可以用这个

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

For More Options you could check jquery validate plugin site

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

http://jqueryvalidation.org/validate/

http://jqueryvalidation.org/validate/

回答by user3111011

Check this:-

检查这个:-

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