插入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

我在这个问题中找到了答案：jquery.validate.unobtrusive notWorking withdynamicinjectedelements

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