如何使用 jquery 验证来自输入数组的至少一个输入

我有一个表结构化输入数组(如registrant，firstname，phone，email)，如下html。

$('#register_form').validate({ 
rules: {
'firstname[]': {
required: true,
},
'phone[]': {
required: true,
},
'email[]': {
required: true,
},
event: {
required: true,
},
},
messages: {
'firstname[]': {
required: "Please enter registrant name",
},
'phone[]': {
required: "Please enter registrant phone",
},
'email[]': {
required: "Please enter registrant email",
},
event: {
required: "Please check atleast one event",
},
},
errorPlacement: function(error, element) {
error.appendTo( element.closest("div") );
},
});

.registrant_table{width: 100%;border: 1px solid #ccc;text-align: center;}
.registrant_table tr td{border: 1px solid #ccc;height: 42px;font-weight: bolder;}
.registrant_table input{border: 0px !important;width: 100%;height: 42px;text-align: center;font-weight: normal;}
label.error{color: red !important;}

<form method="post" action="" name="register_form" id="register_form">
<div>
<table class="registrant_table">
<tr>
<td>No</td>
<td>Official Full Name</td>
<td>Mobile Contact</td>
<td>Email</td>
</tr>
<tr>
<td>1</td>
<td><input type="text" name="firstname[]"></td>
<td><input type="text" name="phone[]"></td>
<td><input type="text" name="email[]"></td>
</tr>
<tr>
<td>2</td>
<td><input type="text" name="firstname[]"></td>
<td><input type="text" name="phone[]"></td>
<td><input type="text" name="email[]"></td>
</tr>
<tr>
<td>3</td>
<td><input type="text" name="firstname[]"></td>
<td><input type="text" name="phone[]"></td>
<td><input type="text" name="email[]"></td>
</tr>
<tr>
<td>4</td>
<td><input type="text" name="firstname[]"></td>
<td><input type="text" name="phone[]"></td>
<td><input type="text" name="email[]"></td>
</tr>
<tr>
<td>5</td>
<td><input type="text" name="firstname[]"></td>
<td><input type="text" name="phone[]"></td>
<td><input type="text" name="email[]"></td>
</tr>
</table>
</div>
<br>
<div class="col-md-4 col-sm-6 col-xs-12">
<label>Please tick the event you are joining:</label><br>
</div>
<div class="col-md-8 col-sm-6 col-xs-12 checkbox_container">
<input type="checkbox" name="event" value="26-27 April 2018, Royale Chulan Damansara, Malaysia">&nbsp;&nbsp;&nbsp;26-27 April 2018, Royale Chulan Damansara, Malaysia<br>
<input type="checkbox" name="event" value="3-4 May 2018, Grand Hyatt, Singapore">&nbsp;&nbsp;&nbsp;3-4 May 2018, Grand Hyatt, Singapore<br>
<input type="checkbox" name="event" value="Royal Plaza Hotel, Mongkok, Hong Kong">&nbsp;&nbsp;&nbsp;Royal Plaza Hotel, Mongkok, Hong Kong<br>
<input type="checkbox" name="event" value="Grand Hyatt, Menteng, Jakarta, Indonesia">&nbsp;&nbsp;&nbsp;Grand Hyatt, Menteng, Jakarta, Indonesia<br>
</div>
<p>&nbsp;</p>
<p style="text-align: center;"><input type="submit" value="submit" name="submit"></p>
</form>

我在这里添加了我的代码小提琴

对于一个注册者来说，它工作正常。不能工作多个相同的输入。

我的问题是：

案例1：

如何验证至少一个注册人的所有输入(姓名、电话、电子邮件)是否填写？
案例 2 ：

如果一个注册人填写了所有三个输入。然后我只填写第二个注册人的姓名(或电话或电子邮件)。然后点击提交。

如何显示第二个注册人的电话和电子邮件的错误消息？

如果用户未注册第二注册人的姓名或电话或电子邮件。不需要验证该行。(对于其他注册者也是如此，例如 3,4,5)。

我需要满足这两种情况。

在这里，我为每一行添加了类，并通过获取每行元素的值进行验证。

如上所述，它适用于这两种情况。

网页代码：

<div>
<table class="registrant_table">
<tr class="title">
<td>No</td>
<td>Official Full Name</td>
<td>Mobile Contact</td>
<td>Email</td>
</tr>
<tr class="in-fields">
<td>1</td>
<td><input type="text" value="" name="firstname[]"></td>
<td><input type="text" value="" name="phone[]"></td>
<td><input type="text" value="" name="email[]"></td>
</tr>
<tr class="in-fields">
<td>2</td>
<td><input type="text" name="firstname[]"></td>
<td><input type="text" name="phone[]"></td>
<td><input type="text" name="email[]"></td>
</tr>
<tr class="in-fields">
<td>3</td>
<td><input type="text" name="firstname[]"></td>
<td><input type="text" name="phone[]"></td>
<td><input type="text" name="email[]"></td>
</tr>                   
</table>
</div>

风格：

.registrant_table{width: 100%;border: 1px solid #ccc;text-align: center;}
.registrant_table tr td{border: 1px solid #ccc;height: 42px;font-weight: bolder;}
.registrant_table input{border: 0px !important;width: 100%;height: 42px;text-align: center;font-weight: normal;}
label.error{color: red !important;}
.err-fields{background-color:red;color: white !important;}

脚本：

$(document).ready(function() {      
$("#submit").click(function() {
var i =1; var atleast = 0;
var allempty=0; var anyfield=0; 
console.clear();
$(".err-fields").remove();
$(".in-fields").each(function(){                        
var txt     = $(this).find("input[name='firstname[]']").val();
var phon    = $(this).find("input[name='phone[]']").val();
var mail    = $(this).find("input[name='email[]']").val();
console.log($(this));
if((txt!="") && (phon!="") && (mail!=""))  {// atleast one
atleast++;
} else if((txt=="") && (phon=="") && (mail=="")) {
allempty++;
} else {
anyfield++;
var txterr=pherr=mailerr="";
if(txt=="")
txterr = "Name field is empty";
if(phon=="") 
pherr = "Contact field is empty";
if(mail=="") 
mailerr = "Email field is empty";
$('<tr class="err-fields"><td colspan="2">'+txterr+'</td><td>'+pherr+'</td><td>'+mailerr+'</td></tr>').insertAfter($(this).closest('tr'));
return false;
}
});
if(atleast==0 && anyfield==0) {
$(".err-fields").remove();
$('<tr class="err-fields"><td colspan="4">Fill atleast one row fields</td></tr>').insertAfter($('table tr:last'));
} else if(anyfield==0) {
$(".err-fields").remove();
console.log("form submitted");
}
});
});

相关内容

最新更新

热门标签：