Input Required属性在javascript生成时不起作用
Input Required attribute does not working when generated by javascript
Input Required属性直接写入Body时有效。当生成新行时，需要在检查中显示属性，但不能用于下一行元素。我正试着说明这个场景。
对于以下图像，所需字段正在工作必填字段仅适用于第一行
但是当我按下添加按钮时，下一行元素所需属性不像下面这样工作:对于下一个任何其他行元素所需属性不起作用
下面是我的代码。
<!DOCTYPE html>
<html>
<head>
<title>Test by JavaScript</title>
<link type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://1000hz.github.io/bootstrap-validator/dist/validator.min.js"></script>
</head>
<form id="testForm" name="testForm" method="post" action="" autocomplete="off" enctype="multipart/form-data" data-toggle="validator" role="form">
<table id="testDataTable" class="table">
<thead>
<tr>
<th><div class="form-group">Y/N</div></th>
<th><div class="form-group">Name</div></th>
<th><div class="form-group">No</div></th>
<th><div class="form-group">Value</div></th>
</tr>
</thead>
<tbody id="testTbody">
<tr>
<td><div class="form-group"><INPUT type="checkbox" id="t_chk" name="t_chk" /></div></td>
<td><div class="form-group"><input type="text" class="form-control" id="t_NameTxt" name="t_NameTxt[]" required /></div></td>
<td><div class="form-group"><input type="text" class="form-control" id="t_IDTxt" name="t_IDTxt[]" required /></div></td>
<td><div class="form-group"><input type="text" class="form-control" id="t_ApxValTxt" name="t_ApxValTxt[]" required /></div></td>
</tr>
</tbody>
</table>
<div id="testBtnBlk" class="col-md-10">
<div class="form-group">
<input type="button" value="Add" class="btn btn-warning" onclick="addRowTest('testDataTable')"/>
<input type="button" id="delRow" class="btn btn-danger" value="Delete"/>
</div>
</div>
<script type="text/javascript">
function addRowTest(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var newcell = '<tr><td><div class="form-group"><INPUT type="checkbox" id="t_chk'+rowCount+'" name="t_chk"/></div></td><td><div class="form-group"><input type="text" class="form-control" id="t_NameTxt'+rowCount+'" name="t_NameTxt[]" required /></div></td><td><div class="form-group"><input type="text" class="form-control" id="t_IDTxt'+rowCount+'" name="t_IDTxt[]" required /></div></td><td><div class="form-group"><input type="text" class="form-control" id="t_ApxValTxt'+rowCount+'" name="t_ApxValTxt[]" required /></div></td></tr>';
table.rows[rowCount].innerHTML = newcell;
}
$(document).ready(function () {
$("#delRow").on("click", function () {
if($('#testTbody').children('tr').length>1){
$('table tr').has('input[name="t_chk"]:checked').remove()
}
})
});
</script>
</form>
</body>
</html>有没有人可以帮助我的超文本错误?
添加新行后需要重新初始化插件。这与HTML5的required属性无关。
只是检查DOC，您需要在添加函数的底部使用:
$('#testForm').validator('update');
<!DOCTYPE html>
<html>
<head>
<title>Test by JavaScript</title>
<link type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://1000hz.github.io/bootstrap-validator/dist/validator.min.js"></script>
</head>
<form id="testForm" name="testForm" method="post" action="" autocomplete="off" enctype="multipart/form-data" data-toggle="validator" role="form">
<table id="testDataTable" class="table">
<thead>
<tr>
<th>
<div class="form-group">Y/N</div>
</th>
<th>
<div class="form-group">Name</div>
</th>
<th>
<div class="form-group">No</div>
</th>
<th>
<div class="form-group">Value</div>
</th>
</tr>
</thead>
<tbody id="testTbody">
<tr>
<td>
<div class="form-group">
<INPUT type="checkbox" id="t_chk" name="t_chk" />
</div>
</td>
<td>
<div class="form-group">
<input type="text" class="form-control" id="t_NameTxt" name="t_NameTxt[]" required />
</div>
</td>
<td>
<div class="form-group">
<input type="text" class="form-control" id="t_IDTxt" name="t_IDTxt[]" required />
</div>
</td>
<td>
<div class="form-group">
<input type="text" class="form-control" id="t_ApxValTxt" name="t_ApxValTxt[]" required />
</div>
</td>
</tr>
</tbody>
</table>
<div id="testBtnBlk" class="col-md-10">
<div class="form-group">
<input type="button" value="Add" class="btn btn-warning" onclick="addRowTest('testDataTable')" />
<input type="button" id="delRow" class="btn btn-danger" value="Delete" />
</div>
</div>
<script type="text/javascript">
function addRowTest(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var newcell = '<tr><td><div class="form-group"><INPUT type="checkbox" id="t_chk' + rowCount + '" name="t_chk"/></div></td><td><div class="form-group"><input type="text" class="form-control" id="t_NameTxt' + rowCount + '" name="t_NameTxt[]" required /></div></td><td><div class="form-group"><input type="text" class="form-control" id="t_IDTxt' + rowCount + '" name="t_IDTxt[]" required /></div></td><td><div class="form-group"><input type="text" class="form-control" id="t_ApxValTxt' + rowCount + '" name="t_ApxValTxt[]" required /></div></td></tr>';
table.rows[rowCount].innerHTML = newcell;
$('#testForm').validator('update');
}
$(document).ready(function() {
$("#delRow").on("click", function() {
if ($('#testTbody').children('tr').length > 1) {
$('table tr').has('input[name="t_chk"]:checked').remove()
}
})
});
</script>
</form>
</body>
</html>相关文章：
- 为什么这个 .push 不起作用?(JavaScript）
- document.createelement不起作用(javascript）
- Chrome 中表格的 CSV 导出不起作用 - JavaScript/AngularJS
- 如果语句不起作用 - JavaScript
- 为什么我的动态更改链接不起作用?(Javascript）
- RPS 函数不起作用(JavaScript）
- 计时器间隔不起作用 Javascript
- 通过返回 false - 不起作用(javascript）来阻止链接打开
- Eval 不起作用 - JavaScript
- Android 浏览器 .click(） 不起作用 javascript
- 为什么这段代码不起作用?Javascript
- jsFiddle显示正确，但一旦在本地运行就不起作用(Javascript）
- 带有html的Navigator不起作用javascript
- 从文本文件中提取内容不起作用 JavaScript
- 从查询字符串中获取参数;不起作用..Javascript
- regex手机验证不起作用-javascript
- if和else语句不起作用(javascript）(html）
- 更改字体大小的复选框不起作用-Javascript
- 为什么这个基本的 if 语句不起作用?JavaScript
- Timer 不起作用/ JavaScript/ innerHTML null
