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
jquery validation rules for radio buttons
提问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 name
is 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 required
rule 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 name
is 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_group
rule that is part of the plugin's additional-methods.js
file. 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 name
is differenton each radio in the group AND you do not know the name
attribute (although a name
on 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 name
attributes. (However, even though you're not using the name
here, 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 groups
optionwithin .validate()
to combine the error messages into one single message. Then use the errorPlacement
optionto 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 验证插件站点
回答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>