1

我正在尝试对使用 LiveValidation javascript 库动态添加的表单控件进行客户端验证。

当控件和验证代码从一开始就在那里时，它可以正常工作，但不适用于已动态添加的控件。

静态控制和验证（工作正常）

<!-- the container where the dynamic javascript code manipulates -->
                <div id = "FileUploadContainer">
                    <!--FileUpload Controls will be added here -->
                    <input id="file0" name = "file" type="file" class ="size4"/>
                    <script type="text/javascript">
                        var file0 = new LiveValidation('file0', { wait: 500 });
                        file0.add(Validate.Presence, { failureMessage: "File is required." });
                    </script>
                    <input id="textbox0" name = "txtShotNo" type="text" placeholder="Shot #" class="size1"/>
                    <script type="text/javascript">
                        var textbox0 = new LiveValidation('textbox0', { wait: 500 });
                        textbox0.add(Validate.Presence, { failureMessage: "Shot number is required." });
                        textbox0.add(Validate.Numericality, { onlyInteger: true, minimum: 1, maximum: 10000 });
                    </script>
                </div>

动态添加的控件和验证（不起作用）

<script type = "text/javascript">
    var counter = 1;
    function AddFileUpload() {
        var div = document.createElement('DIV');
        div.innerHTML = '<input id="file' + counter + '" name = "file" type="file" class="size4" />' +
                        '<script type="text/javascript">' +
                        '   var file' + counter + ' = new LiveValidation(\'file' + counter + '\', { wait: 500 });' +
                        '   file' + counter + '.add(Validate.Presence, { failureMessage: "File is required." });' +
                        '<\/script>' +
                        '<input id="textbox' + counter + '" name = "txtShotNo" type="textbox" placeholder="Shot #" class="size1" />' +
                        '<script type="text/javascript">' +
                        '    var textbox' + counter + ' = new LiveValidation(\'textbox' + counter + '\', { wait: 500 });' +
                        '    textbox' + counter + '.add(Validate.Presence, { failureMessage: "Shot number is required." });' +
                        '    textbox' + counter + '.add(Validate.Numericality, { onlyInteger: true, minimum: 1, maximum: 10000 });' +
                        '<\/script>' +
                        '<input id="Button' + counter + '" type="button" value="Remove" onclick = "RemoveFileUpload(this)" class="primary" />';
        document.getElementById("FileUploadContainer").appendChild(div);
        counter++;
    }
    function RemoveFileUpload(div) {
        document.getElementById("FileUploadContainer").removeChild(div.parentNode);
    }
    </script>

任何人都对我如何获得验证以用于动态添加的控件有一些指示？

4

0 回答 0