jQuery validation of a form inserted into DOM

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

There is an easier way to do this Dany - I prefer to just rebind the form after the ajax response as you can get yourself tied in knots trying to manage what fields have changed or been replaced in the dom.

I have a very large and complex application which makes many changes to many forms so it is easier to just get in the habit of a full rebind. This can be done using:

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

We have a slightly more elegant use of this where a specific container is passed in using the same principal.

The agonising problems to solve happen when an element has been replaced as the reference in the validator is not the same as the new dom element. Very hard to debug and track down. You will find just destroying the validator and reparsing the whole form a 1 size fits all approach and it doesnt matter what's been removed, replaced or otherwise.