【发布时间】：2018-07-17 02:13:47
【问题描述】：
它只验证非动态输入并忽略动态输入。 我使用了一个 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
【问题讨论】：
-
动态字段必须有唯一的ID，否则用getElementByID是找不到的。要获取多个元素，您可以使用 Class
标签： javascript jquery html validation