插入 DOM 的表单的 jQuery 验证

Question

我在页面上有这个标记：

 <div data-bind="visible: found">
        <div data-bind="with: eventDetails">
            <!-- Some stuff -->
        </div>
        <div style="clear: left">
            <div id="newShow" title="Add a Show"></div>
            <a href="#" class="btn btn-primary" id="addShow" data-bind="click: addShow">Add a Show</a> <!-- this is bound to a knockout viewmodel which calls addShowDialog() function -->
        </div>
 </div>

这是加载到div#newShow的表单

<form action="/MyEvents/AddShow/events-385" id="addShowForm" method="post" novalidate="novalidate">    <div>
        <div class="editor-label">
            <label for="Name">Name</label>
        </div>
        <div class="editor-field">
            <input class="text-box single-line" data-val="true" data-val-required="The Name field is required." id="Name" name="Name" type="text" value="">
            <span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>
        </div>
        <div class="editor-label">
            <label for="Date">Date</label>
        </div>
        <div class="editor-field">
            <input class="text-box single-line hasDatepicker" data-val="true" data-val-date="The field Date must be a date." data-val-required="The Date field is required." id="Date" name="Date" type="datetime" value="10 January 2013">
            <span class="field-validation-valid" data-valmsg-for="Date" data-valmsg-replace="true"></span>
        </div>
        <div class="editor-label">
            <label for="ReportingTime">ReportingTime</label>
        </div>
        <div class="editor-field">
            <input class="text-box single-line hasDatepicker" data-val="true" data-val-date="The field ReportingTime must be a date." data-val-required="The ReportingTime field is required." id="ReportingTime" name="ReportingTime" type="datetime" value="03:26 p.m.">
            <span class="field-validation-valid" data-valmsg-for="ReportingTime" data-valmsg-replace="true"></span>
        </div>
        <div class="editor-label">
            <label for="JudgingStarts">JudgingStarts</label>
        </div>
        <div class="editor-field">
            <input class="text-box single-line hasDatepicker" data-val="true" data-val-date="The field JudgingStarts must be a date." data-val-required="The JudgingStarts field is required." id="JudgingStarts" name="JudgingStarts" type="datetime" value="03:26 p.m.">
            <span class="field-validation-valid" data-valmsg-for="JudgingStarts" data-valmsg-replace="true"></span>
        </div>
    </div>
</form>

这是插入表单并处理从表单返回的 Javascript：

function addShowDialog() {
        $.get('/myevents/addShow/' + eventId,
            null,
            function (data, textStatus, xhr) {
                refreshTarget($('#newShow'), data);
                $('#newShow').dialog('open');
            });
    };

$('#newShow').dialog({
        autoOpen: false,
        modal: true,
        resizable: false,
        buttons: {
            "Create a Show": function () {
                var form = $('#addShowForm');
                var valid = form.valid(); //<-- this always returns true!
                if (valid) {
                    var formData = form.serialize();
                    formData = formData + '&EventId=' + encodeURIComponent(eventId);
                    $.post(
                        form.attr('action'),
                        formData,
                        function(data) {
                            if (data == "Success") {
                                $('#newShow').dialog("close");
                            }
                        }
                    );
                }
            },
            "Cancel": function () {
                $(this).dialog("close");
            }
        },
        close: function () {
            loadData();
        }
    });

我无法让div#newShow 中的表单进行验证。检查form.valid() 始终返回true。我的头（和眼球）有点像整个事情都在游动，所以我希望这是有道理的。

有什么想法吗？

Answer 1

有一种更简单的方法可以做到这一点，Dany - 我更喜欢在 ajax 响应之后重新绑定表单，因为您可能会陷入困境，试图管理 dom 中哪些字段已更改或被替换。

我有一个非常庞大且复杂的应用程序，它对许多表单进行了许多更改，因此更容易养成完全重新绑定的习惯。这可以使用：

        var forms = $("body").find("form");
        for (var i = 0; i < forms.length; i++) {
            var form = $(forms[i]);

            form.removeData("validator")
                .removeData("unobtrusiveValidation");

            $.validator.unobtrusive.parse(form);
        }

我们有一个更优雅的用法，其中使用相同的主体传入特定容器。

当一个元素被替换为验证器中的引用与新的 dom 元素不同时，就会出现要解决的痛苦问题。很难调试和追踪。您会发现只需销毁验证器并重新解析整个表单，以 1 大小适合所有方法，而删除、替换或其他方式无关紧要。

Answer 2

文档说明在使用 valid() 之前需要在表单上调用 validate()

var form = $('#addShowForm');
form.validate();
var valid = form.valid();

http://docs.jquery.com/Plugins/Validation/valid

Answer 3

一些建议：

• 尝试调试并单步执行 $('form').validate()。 jQuery 在表单上附加了验证（如果还没有的话）有一点。验证它是否是正确的形式。
• jQuery UI 对话框获取调用它的元素并将其附加到页面的末尾。我不确定在调用 elemebt 上的 .dialog() 之前或之后调用 .validate() 是否会导致问题表格已打开。试着排除一下

Answer 4

我在这个问题中找到了答案：jquery.validate.unobtrusive not working with dynamic injected elements

Steve Lamb 的回答对我帮助最大。据我了解，所有验证器都在页面加载时连接起来。如果稍后添加表单或字段，则必须手动连接其验证器。我用史蒂夫的小插件把它们连接起来。