在动态创建的表/表单问题上输入验证

时间:2011-09-04 18:17:50

标签: javascript jquery html jquery-validate

如何更改此设置,以便验证与动态创建的行一起运行良好?

<!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>

0 个答案:

没有答案