您可以看到sample。它没有经过验证。
我刚刚通过一些验证创建了相同的内容。验证工作正常，但添加一行无效。
无法确定我错误的地方。帮助这个。提前谢谢。
$(document).ready(function () {
$("#mobile").keypress(function (e) {
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
return false;
}
});
});
$(document).on('click', '#add_row', function () {
var a = $("#name").val();
var b = $("#country").val();
var c = $("#mail_id").val();
var d = $("#mobile").val();
if (a == "") {
$("#name").addClass("error");
}
else {
$("#name").removeClass("error");
}
if (b == "") {
$("#country").addClass("error");
}
else {
$("#country").removeClass("error");
}
if (c == "") {
$("#mail_id").addClass("error");
}
else {
$('#mail_id').focusout(function () {
$('#mail_id').filter(function () {
var email = $('#mail_id').val();
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
if (!emailReg.test(email)) {
$("#mail_id").addClass("error");
return false;
} else {
$("#mail_id").removeClass("error");
}
});
});
}
if (d == "") {
$("#mobile").addClass("error");
}
else {
$("#mobile").removeClass("error");
}
var i = 1;
if (a || b || c || d == '') {
i = 1;
}
else {
$('#addr' + i).html("<td><input name='checkbo" + i + "' type='checkbox' placeholder='' class='check' /></td><td><input name='name" + i + "' type='text' placeholder='Name' class='form-control input-md' /> </td><td><select name='country" + i + "' class='form-control'><option value=''>select an option</option><option value='afghan'>Afghanistan</option><option value='albania'>Albania</option></select></td><td><input name='mail" + i + "' type='text' placeholder='Mail' class='form-control input-md'></td><td><input name='mobile" + i + "' type='text' placeholder='Mobile' class='form-control input-md'></td>");
$('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>');
i++;
}
$("#delete_row").click(function () {
if (i > 1) {
$("#addr" + (i - 1)).html('');
i--;
}
});
});.error{
border: 1px solid red;
transition: border-color .25s ease;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr >
<th>
</th>
<th class="text-center">
#
</th>
<th class="text-center">
Name
</th>
<th class="text-center">
Mail
</th>
<th class="text-center">
Mobile
</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>
<input type="checkbox" class="check_0">
</td>
<td>
<input type="text" name='name0' placeholder='Name' class="form-control name" id="name" required>
</td>
<td>
<select id="country" name="country" class="form-control">
<option value="">select an option</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
</select>
</td>
<td>
<input type="text" name='mail0' placeholder='Mail' class="form-control" id="mail_id" required>
</td>
<td>
<input type="text" name='mobile0' placeholder='Mobile' class="form-control" id="mobile" required>
</td>
</tr>
<tr id='addr1'></tr>
</tbody>
</table>
</div>
</div>
<a id="add_row" class="btn btn-default pull-left">Add Row</a><a id='delete_row' class="pull-right btn btn-default">Delete Row</a>
</div>
答案 0 :(得分：1)
您需要为if statement中的每个变量提供比较值，例如
if (a == '' || b == ''|| c == ''|| d == '') {
i = 1;
}
如果你像
那样写if (a || b || c || d == '') {
i = 1;
}
它应该检查a, b, c不应该是null且d不为空。这意味着什么。
$(document).ready(function (a, b, c,d) {
$("#mobile").keypress(function (e) {
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
return false;
}
});
});
function validate() {
var a = $("#name").val();
var b = $("#country").val();
var c = $("#mail_id").val();
var d = $("#mobile").val();
console.log('in validate');
if (a == "") {
$("#name").addClass("error");
return false;
}
else {
$("#name").removeClass("error");
}
if (b == "") {
$("#country").addClass("error");
return false;
}
else {
$("#country").removeClass("error");
}
if (d == "") {
$("#mobile").addClass("error");
return false;
}
else {
$("#mobile").removeClass("error");
}
if (c == "") {
$("#mail_id").addClass("error");
return false;
}
else {
var email = $('#mail_id').val();
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
if (!emailReg.test(email)) {
$("#mail_id").addClass("error");
console.log('in error');
return false;
} else {
$("#mail_id").removeClass("error");
return true;
}
}
}
$(document).on('click', '#add_row', function () {
var flag = validate();
var i = 1;
console.log(flag);
if (flag == false) {
i = 1;
}
else {
console.log('adding row');
$('#addr' + i).html("<td><input name='checkbo" + i + "' type='checkbox' placeholder='' class='check' /></td><td><input name='name" + i + "' type='text' placeholder='Name' class='form-control input-md' /> </td><td><select name='country" + i + "' class='form-control'><option value=''>select an option</option><option value='afghan'>Afghanistan</option><option value='albania'>Albania</option></select></td><td><input name='mail" + i + "' type='text' placeholder='Mail' class='form-control input-md'></td><td><input name='mobile" + i + "' type='text' placeholder='Mobile' class='form-control input-md'></td>");
$('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>');
i++;
}
$("#delete_row").click(function () {
if (i > 1) {
$("#addr" + (i - 1)).html('');
i--;
}
});
});.error{
border: 1px solid red;
transition: border-color .25s ease;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr >
<th>
</th>
<th class="text-center">
#
</th>
<th class="text-center">
Name
</th>
<th class="text-center">
Mail
</th>
<th class="text-center">
Mobile
</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>
<input type="checkbox" class="check_0">
</td>
<td>
<input type="text" name='name0' placeholder='Name' class="form-control name" id="name" required>
</td>
<td>
<select id="country" name="country" class="form-control">
<option value="">select an option</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
</select>
</td>
<td>
<input type="text" name='mail0' placeholder='Mail' class="form-control" id="mail_id" required>
</td>
<td>
<input type="text" name='mobile0' placeholder='Mobile' class="form-control" id="mobile" required>
</td>
</tr>
<tr id='addr1'></tr>
</tbody>
</table>
</div>
</div>
<a id="add_row" class="btn btn-default pull-left">Add Row</a><a id='delete_row' class="pull-right btn btn-default">Delete Row</a>
</div>
答案 1 :(得分：0)
更改if if (!a || !b || !c || !d)
$(document).ready(function () {
$("#mobile").keypress(function (e) {
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
return false;
}
});
});
$(document).on('click', '#add_row', function () {
var a = $("#name").val();
var b = $("#country").val();
var c = $("#mail_id").val();
var d = $("#mobile").val();
if (a == "") {
$("#name").addClass("error");
}
else {
$("#name").removeClass("error");
}
if (b == "") {
$("#country").addClass("error");
}
else {
$("#country").removeClass("error");
}
if (c == "") {
$("#mail_id").addClass("error");
}
else {
$('#mail_id').focusout(function () {
$('#mail_id').filter(function () {
var email = $('#mail_id').val();
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
if (!emailReg.test(email)) {
$("#mail_id").addClass("error");
return false;
} else {
$("#mail_id").removeClass("error");
}
});
});
}
if (d == "") {
$("#mobile").addClass("error");
}
else {
$("#mobile").removeClass("error");
}
var i = 1;
if (!a || !b || !c || !d) {
i = 1;
}
else {
$('#addr' + i).html("<td><input name='checkbo" + i + "' type='checkbox' placeholder='' class='check' /></td><td><input name='name" + i + "' type='text' placeholder='Name' class='form-control input-md' /> </td><td><select name='country" + i + "' class='form-control'><option value=''>select an option</option><option value='afghan'>Afghanistan</option><option value='albania'>Albania</option></select></td><td><input name='mail" + i + "' type='text' placeholder='Mail' class='form-control input-md'></td><td><input name='mobile" + i + "' type='text' placeholder='Mobile' class='form-control input-md'></td>");
$('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>');
i++;
}
$("#delete_row").click(function () {
if (i > 1) {
$("#addr" + (i - 1)).html('');
i--;
}
});
});.error{
border: 1px solid red;
transition: border-color .25s ease;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr >
<th>
</th>
<th class="text-center">
#
</th>
<th class="text-center">
Name
</th>
<th class="text-center">
Mail
</th>
<th class="text-center">
Mobile
</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>
<input type="checkbox" class="check_0">
</td>
<td>
<input type="text" name='name0' placeholder='Name' class="form-control name" id="name" required>
</td>
<td>
<select id="country" name="country" class="form-control">
<option value="">select an option</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
</select>
</td>
<td>
<input type="text" name='mail0' placeholder='Mail' class="form-control" id="mail_id" required>
</td>
<td>
<input type="text" name='mobile0' placeholder='Mobile' class="form-control" id="mobile" required>
</td>
</tr>
<tr id='addr1'></tr>
</tbody>
</table>
</div>
</div>
<a id="add_row" class="btn btn-default pull-left">Add Row</a><a id='delete_row' class="pull-right btn btn-default">Delete Row</a>
</div>