javascript - 我的验证不适用于我的动态输入
问题描述
它仅验证非动态输入并忽略动态输入。我使用了一个 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 的元素。您需要将其更改为类。
$(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>
推荐阅读
- reactjs - 使用 Jest 模拟 React 的 AJAX 请求
- ios - Flutter - 在 IOS 上使用 FCM 的后台通知
- delphi - Microsoft OAuth 登录布局错误
- java - 多租户 - 租户的运行时创建
- excel - 如何在 VBA 的列表框中使用值?
- java - 为什么 Java 不能推断超类型?
- bash - 为什么我的 bash 脚本中不断出现语法错误?它是否与“:”有关?
- ios - Swift 5 - 中间视图控制器短暂出现 - 应该删除吗?
- sensors - mipi dsi和spi有什么区别?
- java - java.lang.UnsatisfiedLinkError:java.library.path 中没有 opencv_java