web-dev-qa-db-ja.com

jqueryクライアント側の検証がMVC3部分ビューで機能しない

次の部分的なビューでは、クライアント側の検証を機能させることができなかったようです。このビューは、親ビューのdivTSettingsdiv内にあります。 stackoverflowや他のサイトから多くのことを試しましたが、何も機能していないようです。何か案は？

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>


@using (Ajax.BeginForm("CreateT", "TAdmin", null,
        new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "divTSettings"},
                       new { id = "CreateTForm" }))
{
    <div>
        <label>Name:</label>
        <input type="text" name="tName" id="tName"/>
        @Html.ValidationMessage("tName")
        <input type="submit" value="Submit"/>
    </div>
}

<script type="text/javascript">
$(function() {
    $('#CreateTForm').validate({
        rules: {
            tName: {
                required: true
            }
        },
        messages: {
            tName: {
                required: 'Name required'
            }
        }
    });
    $("#CreateTForm").removeData("validator");
    $("#CreateTForm").removeData("unobtrusiveValidation");
    $.validator.unobtrusive.parse("#CreateTForm");
});
</script>
jqueryasp.net-mvc-3jquery-validate
17
blue

何か案は？

はい、最初にすべきことは、部分的なビューからこれらの_<script>_タグをすべて削除することです。部分ビューにはスクリプトを含めないでください。部分ビューにはマークアップのみを含める必要があります。私はこれを何度も繰り返しましたが、それでも人々がスクリプトを挿入しているのを目にします。スクリプトは、レイアウトまたはパーシャルをレンダリングしたメインビューのいずれかに登録する必要があります。おそらく、レイアウトに登録されている一部のスクリプトセクションをオーバーライドして、すべてのスクリプトがHTMLドキュメントの最後の終了直前に挿入されるようにします_</body>_タグ。それが彼らが属するところです。

さて、実際の問題です。たとえば、AJAXリクエストをサーバーに送信するなど、DOMに動的に追加された要素では、目立たない検証はすぐには機能しません。部分ビューを返し、この部分ビューがDOMに挿入されます。

それを機能させるには、これらの新しく追加された要素を目立たない検証フレームワークに登録する必要があります。これを行うには、新しく追加された要素で_$.validator.unobtrusive.parse_を呼び出す必要があります。

_$("form").removeData("validator");
$("form").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse("form");
_

このコードは、部分をDOMに挿入するAJAX成功ハンドラー内に配置する必要があります。新しい要素を挿入したら、この関数を呼び出すだけです。

また、AJAXリクエストをjQuery（$ .ajax、$ .post、...）を使用して手動で記述していないが、一部のAjax.BeginFormおよびAjax.ActionLinkヘルパーに依存している場合あなたのために、あなたはAjaxOptionsでOnSuccessコールバックをサブスクライブし、そこにこのコードを置く必要があります。

87
Darin Dimitrov

グローバルレベルで修正したい場合は、これが役立つはずです。 _layout.cstmlで使用しました。

  $(document).ajaxStart(function () {
                $.ajaxSetup({
                    converters: {
                        "text html": function (textValue) {
                            if (textValue) {
                                // Some parsing logic here
                                var script = "<script type='text/javascript' language='javascript' > $.validator.unobtrusive.parse(\"form\");";
                                var scriptend = "\<\/script>";
                                return script + scriptend + " " + textValue;
                            } else {
                                // This will notify a parsererror for current request
                                throw exceptionObject;
                            }
                        }
                    }
                });
            });
0
kuns200