jQuery 验证多个具有相同名称的字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9033184/
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 Validate multiple fields with the same name
提问by Francisco Costa
I have this form with inputs with the same name but similar (incremental) ids.
我有这个表单，其中的输入具有相同的名称，但具有相似的（增量）ID。
I want the form to validate if there is a name on person, the age must be mandatory..
我希望表单验证人的姓名，年龄必须是强制性的..
What happens now is that only the first input is mandatory.
现在发生的是，只有第一个输入是强制性的。
Here is my code:
这是我的代码：
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
</head>
<body>
<form id="people">
<div class="section">
<input id="person1" name="person" class="person" type="text" placeholder="First Name" />
<input id="age1" name="age" class="age" type="text" placeholder="Age" />
</div>
<div class="section">
<input id="person2" name="person" class="person" type="text" placeholder="First Name" />
<input id="age2" name="age" class="age" type="text" placeholder="Age" />
</div>
<div class="section">
<input id="person3" name="person" class="person" type="text" placeholder="First Name" />
<input id="age3" name="age" class="age" type="text" placeholder="Age" />
</div>
...
<input type="submit" id="submit" name="submit" value="Add" />
</form>
<script type="text/javascript">
$(function(){
$('#people').validate();
$('#submit').click(function(){
$('[id^="person"]').each(function(){
if ($(this).val().length>0){
//alert($(this).val());
//alert($(this).parent().find('.age').val());
$(this).rules('add', {
required: true,
minlength: 2,
messages: {
required: "Specify the person name",
minlength: "Minimum of 2 characters"
}
});
$(this).parent().find('.age').rules('add', {
required: true,
number: true,
messages: {
required: "Must have an age",
number: "Specify a valid age"
}
});
}
});
});
});
</script>
</body>
回答by Chris T
The jQuery Validator plugin doesn't support multiple fields with the same name out-of-the-box. You'll need to edit the source of the plugin to check the fields the way you want.
jQuery Validator 插件不支持开箱即用的多个同名字段。您需要编辑插件的源代码以按照您想要的方式检查字段。
See this answerto a similar question for the work-around.
回答by Jagan
Friends!
朋友们！
In order to validate the text box with the same name use the following it is working fine for me. in addition, No need to declare input parameter as arrays.
为了验证具有相同名称的文本框，请使用以下内容，它对我来说工作正常。此外，无需将输入参数声明为数组。
Here 'minVal' is the name of the text box. similarly, for dropdown use 'document.getElementsByTagName("select");'
这里的“minVal”是文本框的名称。类似地，对于下拉菜单，使用 'document.getElementsByTagName("select");'
function validateMinimumVal(){
inp = document.getElementsByTagName("TEXT");
for ( var i = 0; i < inp.length; ++i ) {
if (inp[i].name =="minVal" && inp[i].value==''){
alert('plesae Add a MINIMUM VALUE!!');
return false;
}
}
return true;
}
Hope this helps!! Jagan
希望这可以帮助！！贾根
回答by sunpietro
<div class="section">
<input id="person1" name="person[]" class="person" type="text" placeholder="First Name" />
<input id="age1" name="age[]" class="age" type="text" placeholder="Age" />
</div>
<div class="section">
<input id="person2" name="person[]" class="person" type="text" placeholder="First Name" />
<input id="age2" name="age[]" class="age" type="text" placeholder="Age" />
</div>
<div class="section">
<input id="person3" name="person[]" class="person" type="text" placeholder="First Name" />
<input id="age3" name="age[]" class="age" type="text" placeholder="Age" />
</div>
You should add square brackets and loop through the array.
您应该添加方括号并遍历数组。
