0
sampleが表示されます。それは検証されなかった。trが動作しない動的追加
私はちょうどいくつかの検証で同じことを作成しました。検証は機能していましたが、行を追加しても機能しませんでした。
私は間違っていた場所を特定できません。これを助けてください。前もって感謝します。
$(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-\.][email protected]([\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>
のような場合は条件が答えてくれてありがとう...シナリオは次のもう一つの問題を。最初に[行を追加]をクリックすると、すべての詳細に無効な電子メールアドレスが入力されます。電子メールアドレスが正しくない場合でも、新しい行が追加されました –
フラグを設定し、有効または無効の電子メールアドレスの値を確認する必要があります。 –
私はjqueryに新しいです。あなたはこれを手伝ってくれますか。 –