我是jquery的新手。我为输入字段编写了验证。并在单击添加行时动态生成输入字段。我为所有输入字段赋予了相同的id值。但是当我点击按钮时，新生成的行没有验证。
我错了。提前致谢。
$(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").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' id='name'/> </td><td><select name='country" + i + "' class='form-control' id='country'><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' id='mail_id'></td><td><input name='mobile" + i + "' type='text' placeholder='Mobile' class='form-control input-md' id='mobile'></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">
Address
</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' 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 :(得分：2)
您不应将相同的id分配给输入，ID必须是唯一的。
将相同的类名分配给要验证的所有输入，如：
$().ready(function() {
$('#div1').hide();
$('#btn1').click(function() {
$('.class1').each(function() {
$('#div1').hide();
if ($(this).val() == "") {
$('#div1').show();
return false;
}
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="div1">Error</div>
<input class="class1"/>
<input class="class1"/>
<input class="class1"/>
<button id="btn1">Click here</button>
这也适用于动态添加的输入。
答案 1 :(得分：1)
就像我评论的那样，你应该从不对字段使用相同的ID。对于字段，ID应该是唯一的。
在XML中，片段标识符的类型为ID，并且只能有一个 每个元素的类型ID的单个属性。因此，在XHTML 1.0中 id属性定义为ID类型。为了确保这一点 XHTML 1.0文档是结构良好的XML文档，XHTML 1.0 文档在定义片段标识符时必须使用id属性 关于上面列出的元素。请参阅HTML兼容性指南 有关确保此类锚点向后兼容的信息 将XHTML文档作为媒体类型text / html提供。
我重构了你的代码。这是工作演示。
https://jsfiddle.net/4onh3nrx/1/
<强> HTML
<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">
Address
</th>
<th class="text-center">
Mobile
</th>
<th class="text-center">
Action
</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 country">
<option value="">select an option</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
</select>
</td>
<td>
<input type="text" name='mail0' class="form-control mail_id" id="mail_id" required>
</td>
<td>
<input type="text" name='mobile0' placeholder='Mobile' class="form-control mobile" id="mobile" required>
</td>
<td>
<a href="#" class="btn btn-warning add-row">
<i class="glyphicon glyphicon-plus"></i>
</a>
</td>
</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>
<强> JS
<script>
$(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', '.delete-row', function(){
$(this).closest('tr').remove();
});
$(document).on('click', '.add-row', function(){
var tr = $(this).closest('tr');
var field = [
'.name', '.country', '.mail_id', '.mobile'
];
console.log(tr);
var flag = false;
for(var i = 0; i < field.length; i++) {
var ele = $.trim($(tr).find(field[i]).val());
console.log(ele);
console.log($(tr).find(field[i]));
if(!ele.length) {
flag = true;
$(tr).find(field[i]).addClass('error');
} else {
$(tr).find(field[i]).removeClass('error');
}
}
if (!flag) {
var html = "<tr><td><input name='checkbo" + i + "' type='checkbox' placeholder='' class='check' /></td><td><input name='name" + i + "' type='text' placeholder='Name' class='form-control name input-md'/> </td><td><select name='country" + i + "' class='form-control country'><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='mail_id form-control input-md'></td><td><input name='mobile" + i + "' type='text' placeholder='Mobile' class='form-control input-md mobile'></td><td><a href='#' class='btn btn-warning add-row'><i class='glyphicon glyphicon-plus'></i></a><a href='#' class='btn btn-danger delete-row'><i class='glyphicon glyphicon-minus'></i></a></td></tr>";
$(html).insertAfter(tr);
}
});
</script>