Question

I have this markup on the page:

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

This is the form which is loaded into 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>

Here’s the Javascript that inserts the form, and handles posting back from it:

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();
        }
    });

I can’t get the form in div#newShow to validate. The check form.valid() always returns true. My head (and eyeballs) are kinda swimming with the whole thing so I hope this makes sense.

Any ideas please?

Answer 1

I found the answer in this question: jquery.validate.unobtrusive not working with dynamic injected elements

The answer by Steve Lamb helped me the most. The way I understand it all the validators are wired up on page load. If a form or field is later added its validator(s) have to be wired up manually. I used Steve’s little plugin to wire those up.