5

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?

4

4 に答える 4

4

これを行う簡単な方法があります ダニー - 私は、DOMでどのフィールドが変更または置き換えられたかを管理しようとする結び目に縛られる可能性があるため、ajax応答の後にフォームを再バインドすることを好みます。

私は、多くのフォームに多くの変更を加える非常に大規模で複雑なアプリケーションを持っているので、完全な再バインドの習慣を身につける方が簡単です。これは、次を使用して実行できます。

        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 つのサイズですべてのアプローチに再解析するだけで、何が削除、置換、またはその他されたかは関係ありません。

于 2013-01-19T08:57:18.033 に答える
3

ドキュメントには、valid() を使用する前にフォームで validate() を呼び出す必要があると記載されています

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

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

于 2013-01-10T02:57:41.427 に答える
2

いくつかの提案：

  • デバッグして$（'form'）。validate（）にステップインしてみてください。jQueryがフォームに検証を添付するポイントがあります（まだ添付されていない場合）。正しい形式かどうかを確認してください。
  • jQuery UIダイアログは、呼び出された要素を取得してページの最後に追加します。フォームが存在する要素.validate()を呼び出す前または後に呼び出すときに、これが問題を引き起こす可能性があるかどうかはわかりません。.dialog()それも除外してみてください
于 2013-01-12T10:36:57.567 に答える
2

この質問で答えを見つけました: jquery.validate.unobtrusiveが動的に挿入された要素で機能しない

Steve Lamb の回答が最も役に立ちました。私が理解している方法では、すべてのバリデーターがページの読み込み時に接続されています。フォームまたはフィールドが後で追加された場合、そのバリデーターを手動で接続する必要があります。私はスティーブの小さなプラグインを使ってそれらを接続しました。

于 2013-01-13T19:11:18.757 に答える