动态创建的表格/表单问题的输入验证
如何更改此设置，以便验证也能很好地处理动态创建的行？
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"
src="jquery-validation-1.8.1/jquery.validate.js"></script>
<script type="text/javascript">
$( document ).ready( function() {
$( "Form" ).validate();
} );
function add_row() {
var data = {
menge : { class : 'required' },
bezeichnung : { class : 'required' },
euro_stueck : { class : 'required' }
};
var table = document.getElementById( 'product' );
var rows = table.getElementsByTagName( 'tr' ).length;
var tr = table.insertRow( rows );
tr.id = 'tr_' + rows;
for ( var name in data ) {
if ( data.hasOwnProperty( name ) ) {
var td = document.createElement( 'td' );
var input = document.createElement( 'input' );
for ( var attr in data[name] ) {
if ( data[name].hasOwnProperty( attr ) ) {
input[attr] = data[name][attr];
}
}
input.name = name + '_' + rows;
td.appendChild( input );
tr.appendChild( td );
}
}
window.scrollTo( 0, document.body.scrollHeight );
// $( "Form" ).validate();
}
</script>
</head>
<body>
<form action="">
<table id="product">
<tr id="tr_0"><th>Menge</th><th>Ware</th><th>Euro/Stück</th></tr>
<tr id="tr_1">
<td><input name="menge_1" class="required" /></td>
<td><input name="bezeichnung_1" class="required" /></td>
<td><input name="euro_stueck_1" class="required" /></td>
</tr>
</table>
<br />
<input type="button" value="Hinzufügen" onclick="add_row()" />
<br /><br />
<input type="submit" value="OK"/>
</form>
</body>
</html>
How do I change this so that the validation is working well with the dynamically created rows too?
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"
src="jquery-validation-1.8.1/jquery.validate.js"></script>
<script type="text/javascript">
$( document ).ready( function() {
$( "Form" ).validate();
} );
function add_row() {
var data = {
menge : { class : 'required' },
bezeichnung : { class : 'required' },
euro_stueck : { class : 'required' }
};
var table = document.getElementById( 'product' );
var rows = table.getElementsByTagName( 'tr' ).length;
var tr = table.insertRow( rows );
tr.id = 'tr_' + rows;
for ( var name in data ) {
if ( data.hasOwnProperty( name ) ) {
var td = document.createElement( 'td' );
var input = document.createElement( 'input' );
for ( var attr in data[name] ) {
if ( data[name].hasOwnProperty( attr ) ) {
input[attr] = data[name][attr];
}
}
input.name = name + '_' + rows;
td.appendChild( input );
tr.appendChild( td );
}
}
window.scrollTo( 0, document.body.scrollHeight );
// $( "Form" ).validate();
}
</script>
</head>
<body>
<form action="">
<table id="product">
<tr id="tr_0"><th>Menge</th><th>Ware</th><th>Euro/Stück</th></tr>
<tr id="tr_1">
<td><input name="menge_1" class="required" /></td>
<td><input name="bezeichnung_1" class="required" /></td>
<td><input name="euro_stueck_1" class="required" /></td>
</tr>
</table>
<br />
<input type="button" value="Hinzufügen" onclick="add_row()" />
<br /><br />
<input type="submit" value="OK"/>
</form>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论