0
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>
あなたは、IDを共有することはありません。 IDはウェブサイトで一意である必要があります。 –