它仅验证非动态输入，而忽略动态输入。 我使用了一个javascript代码，当单击下一个按钮时，如果输入为空，则我的输入会更改其颜色并显示模式。但是，当我单击添加更多按钮以添加动态输入时，它是空的，而我按下了下一个按钮，则直接转到下一页并忽略空白字段
<script type="text/javascript">
function validate_training_next()
{
if(document.getElementById('txtSeminar').value=='')
{
$('#\\#txtSeminarModal').modal('show');
document.getElementById("txtSeminar").style.borderColor="red";
document.getElementById("txtSeminar").style.backgroundColor="yellow";
document.getElementById("txtSeminar").style.borderWidth=2;
return false;
}
else if (document.getElementById('txtSeminarDate').value=='')
{
$('#\\#txtSeminarDateModal').modal('show');
document.getElementById("txtSeminarDate").style.borderColor="red";
document.getElementById("txtSeminarDate").style.backgroundColor="yellow";
document.getElementById("txtSeminarDate").style.borderWidth=2;
return false;
}
else if (document.getElementById('txtOrganization').value=='')
{
$('#\\#txtOrganizationModal').modal('show');
document.getElementById("txtOrganization").style.borderColor="red";
document.getElementById("txtOrganization").style.backgroundColor="yellow";
document.getElementById("txtOrganization").style.borderWidth=2;
return false;
}
else if (document.getElementById('txtOrganizationDate').value=='')
{
$('#\\#txtOrganizationDateModal').modal('show');
document.getElementById("txtOrganizationDate").style.borderColor="red";
document.getElementById("txtOrganizationDate").style.backgroundColor="yellow";
document.getElementById("txtOrganizationDate").style.borderWidth=2;
return false;
}
else
{
document.getElementById("nextSeminarValidate").onclick = openTab(event,'characterTab');
}
}
//this is the code that shows the modal and changes the input color if it is empty <button type="button" name="add_more_trainings" id="add_more_trainings" class="btn btn-success" >Add More Trainings</button>
<br><br>
<div class="table-responsive">
<table class="table table-bordered" id="trainings_dynamic_field">
<tr>
<th>Seminars Attended</th>
<th>Date</th>
<th>Name of Organization</th>
<th>Date</th>
<th></th>
</tr>
<tr>
<td><input type="text" name="txtSeminar[]" id="txtSeminar" class="form-control name_list" /></td>
<td><input type="date" name="txtSeminarDate[]" id="txtSeminarDate" class="form-control name_list" /></td>
<td><input type="text" name="txtOrganization[]" id="txtOrganization" class="form-control name_list" /></td>
<td><input type="date" name="txtOrganizationDate[]" id="txtOrganizationDate" class="form-control name_list" /></td>
<td></td>
</tr>
</table>
<button type="button" id="next_seminar" name="next_seminar" class="btn btn-success form-control" style="width:10%; float: right;" onclick=" return(validate_training_next()); openTab(event, 'characterTab');">Next</button>
<script>
$(document).ready(function(){
var i=1;
$('#add_more_trainings').click(function(){
i++;
$('#trainings_dynamic_field').append('<tr id="row'+i+'"><td><input type="text" name="txtSeminar[]" id="txtSeminar" class="form-control name_list" /></td><td><input type="date" name="txtSeminarDate[]" id="txtSeminarDate" class="form-control name_list" /></td><td><input type="text" name="txtOrganization[]" id="txtOrganization" class="form-control name_list" /></td><td><input type="date" name="txtOrganizationDate[]" id="txtOrganizationDate" class="form-control name_list" /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove_trainings">X</button></td></tr>');
});
$(document).on('click', '.btn_remove_trainings', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
});
</script>
//here's my code for adding dynamic inputs
答案 0 :(得分：0)
文档中不能有多个具有相同ID的元素。您需要将其更改为类。
$(document).ready(function() {
var i = 1;
$('#add_more_trainings').click(function() {
i++;
$('#trainings_dynamic_field').append('<tr id="row' + i + '"><td><input type="text" name="txtSeminar[]" class="form-control name_list txtSeminar" /></td><td><input type="date" name="txtSeminarDate[]" class="txtSeminarDate form-control name_list" /></td><td><input type="text" name="txtOrganization[]" class="txtOrganization form-control name_list" /></td><td><input type="date" name="txtOrganizationDate[]" class="txtOrganizationDate form-control name_list" /></td><td><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove_trainings">X</button></td></tr>');
});
$(document).on('click', '.btn_remove_trainings', function() {
var button_id = $(this).attr("id");
$('#row' + button_id + '').remove();
});
});
function validate_training_next() {
if ( document.getElementsByClassName('txtSeminar').value == '') {
//$('#\\#txtSeminarModal').modal('show');
document.getElementsByClassName("txtSeminar").style.borderColor = "red";
document.getElementsByClassName("txtSeminar").style.backgroundColor = "yellow";
document.getElementsByClassName("txtSeminar").style.borderWidth = 2;
return false;
} else if ( document.getElementsByClassName('txtSeminarDate').value == '') {
$('#\\#txtSeminarDateModal').modal('show');
document.getElementsByClassName("txtSeminarDate").style.borderColor = "red";
document.getElementsByClassName("txtSeminarDate").style.backgroundColor = "yellow";
document.getElementsByClassName("txtSeminarDate").style.borderWidth = 2;
return false;
} else if ( document.getElementsByClassName('txtOrganization').value == '') {
$('#\\#txtOrganizationModal').modal('show');
document.getElementsByClassName("txtOrganization").style.borderColor = "red";
document.getElementsByClassName("txtOrganization").style.backgroundColor = "yellow";
document.getElementsByClassName("txtOrganization").style.borderWidth = 2;
return false;
} else if ( document.getElementsByClassName('txtOrganizationDate').value == '') {
$('#\\#txtOrganizationDateModal').modal('show');
document.getElementsByClassName("txtOrganizationDate").style.borderColor = "red";
document.getElementsByClassName("txtOrganizationDate").style.backgroundColor = "yellow";
document.getElementsByClassName("txtOrganizationDate").style.borderWidth = 2;
return false;
} else {
document.getElementsByClassName("nextSeminarValidate").onclick = openTab(event, 'characterTab');
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" name="add_more_trainings" id="add_more_trainings" class="btn btn-success" >Add More Trainings</button>
<br><br>
<div class="table-responsive">
<table class="table table-bordered" id="trainings_dynamic_field">
<tr>
<th>Seminars Attended</th>
<th>Date</th>
<th>Name of Organization</th>
<th>Date</th>
<th></th>
</tr>
<tr>
<td><input type="text" name="txtSeminar[]" class="form-control name_list txtSeminar" /></td>
<td><input type="date" name="txtSeminarDate[]" class="txtSeminarDate form-control name_list" /></td>
<td><input type="text" name="txtOrganization[]" class="txtOrganization form-control name_list" /></td>
<td><input type="date" name="txtOrganizationDate[]" class="txtOrganizationDate form-control name_list" /></td>
<td></td>
</tr>
</table>
<button type="button" id="next_seminar" name="next_seminar" class="btn btn-success form-control" style="width:10%; float: right;" onclick=" return(validate_training_next()); openTab(event, 'characterTab');">Next</button>