我有一个表结构化输入数组(如注册人,名字,电话,电子邮件),如下面的
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"> 26-27 April 2018, Royale Chulan Damansara, Malaysia<br>
<input type="checkbox" name="event" value="3-4 May 2018, Grand Hyatt, Singapore"> 3-4 May 2018, Grand Hyatt, Singapore<br>
<input type="checkbox" name="event" value="Royal Plaza Hotel, Mongkok, Hong Kong"> Royal Plaza Hotel, Mongkok, Hong Kong<br>
<input type="checkbox" name="event" value="Grand Hyatt, Menteng, Jakarta, Indonesia"> Grand Hyatt, Menteng, Jakarta, Indonesia<br>
</div>
<p> </p>
<p style="text-align: center;"><input type="submit" value="submit" name="submit"></p>
</form>我添加了我的代码小提琴here
它适用于一个注册人.不能使用多个相同的输入.
我的问题是：
>案例1：
如何验证至少一个注册人的所有输入(姓名,电话,电子邮件)是否已填写？
>案例2：
如果一个注册人填写了所有三个输入.然后我只填写第二个注册人的姓名(或电话或电子邮件).然后点击提交.
如何显示第二个注册人的电话和电子邮件的错误消息？
如果用户没有注册第二个注册人名称或电话或电子邮件.不需要
验证该行. (对3,4,5等其他注册人也一样).
我需要满足这两种情况.
最佳答案 在这里,我为每一行添加了类,并通过获取每个行元素的值进行验证.
如上所述,它适用于这两种情况.
HTML代码：
<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");
}
});
});
