web-dev-qa-db-ja.com

AJAX呼び出しからフォームを追加するときに、MVC 5控えめな検証を正しくセットアップする方法は？

私はこの問題についてグーゲル化しており、web.config、bundleconfig、および次のようなレイアウトを確認しました：web.config：

<appSettings>
    <add key="webpages:Version" value="3.0.0.0" />
    <add key="webpages:Enabled" value="false" />
    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>

「BundleConfig.cs」の下の私のApp_Startフォルダー：

        var jqueryBundle = new ScriptBundle("~/bundles/jquery");
        jqueryBundle.Include("~/Scripts/jquery-{version}.js");
        jqueryBundle.Include("~/Scripts/moment.min.js");
        jqueryBundle.Include("~/Scripts/loadingoverlay.js");
        jqueryBundle.Include("~/Scripts/fullcalendar.js");
        jqueryBundle.Include("~/Scripts/lang-all.js");
        jqueryBundle.Transforms.Add(jsTransformer);
        jqueryBundle.Orderer = nullOrderer;
        bundles.Add(jqueryBundle);

var jqueryvalBundle = new ScriptBundle（ "〜/ bundles/jqueryval"）; jqueryvalBundle.Include（ "〜/ Scripts/jquery.validate *"）; jqueryvalBundle.Include（ "〜/ Scripts/jquery.validate.js"）; jqueryvalBundle.Include（ "〜/ Scripts/jquery.validate.unobtrusive.js"）; jqueryvalBundle.Transforms.Add（jsTransformer）; jqueryvalBundle.Orderer = nullOrderer; bundles.Add（jqueryvalBundle）;

私のレイアウトページで：

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/bootstrap")

Firebugショー：

enter image description here

これまでのところ、すべてが含まれており、スムーズに実行されています。

私のモデル：

   [DisplayName("Förnamn")]
    [Required(ErrorMessage = "Vänligen ange ett förnamn")]
    [StringLength(100)]
    public string FirstName { get; set; }
    [DisplayName("Efternamn")]
    [Required(ErrorMessage = "Vänligen ange ett efternamn")]
    [StringLength(100)]
    public string LastName { get; set; }
    [DisplayName("E-post")]
    [Required(ErrorMessage = "Vänligen ange epost")]
    [StringLength(100)]
    [EmailAddress(ErrorMessage = "Ange en korrekt e-postaddress")]
    public string Email { get; set; }
    [DisplayName("Mobil")]
    [DataType(DataType.PhoneNumber)]
    public string PhoenNumber { get; set; }
    [DataType(DataType.Password)]
    [DisplayName("Lösenord")]
    public string PassWord { get; set; }

私の見解：

<div class="col-md-4 col-xs-12">
        @using (Html.BeginForm(null, null, FormMethod.Post, new { id = "credentialsForm" }))
        {
            @Html.AntiForgeryToken()

            <div class="form-horizontal">
                @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                <div class="form-group createCustomerFormGroup">
                    @Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class = "control-label col-md-3" })
                    <div class="col-md-9">
                        @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control", @name = "FirstName" } })
                        @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group createCustomerFormGroup">
                    @Html.LabelFor(model => model.LastName, htmlAttributes: new { @class = "control-label col-md-3" })
                    <div class="col-md-9">
                        @Html.EditorFor(model => model.LastName, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.LastName, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group createCustomerFormGroup">
                    @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-3" })
                    <div class="col-md-9">
                        @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group createCustomerFormGroup">
                    @Html.LabelFor(model => model.PassWord, htmlAttributes: new { @class = "control-label col-md-3" })
                    <div class="col-md-9">
                        @Html.EditorFor(model => model.PassWord, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.PassWord, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group createCustomerFormGroup">
                    @Html.LabelFor(model => model.PhoenNumber, htmlAttributes: new { @class = "control-label col-md-3" })
                    <div class="col-md-9">
                        @Html.EditorFor(model => model.PhoenNumber, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.PhoenNumber, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>
        }
</div>

firebugを介したフォームのフィールド： enter image description here

このスクリプトをfirebugで実行すると、一部のフィールドは必須ですが値がないため、エラーが発生してもエラーは発生しません。

$("#credentialsForm").validate().numberOfInvalids()
// retunrs 0

$("#credentialsForm").validate().valid()
// returns true

私は何時間もここにいて、今は気が狂っています、何が欠けているのですか？

編集：「MVC 5控えめな検証を正しく設定する方法」からの質問を現在のタイトルに変更しました。以前のタイトルよりも私が探していたものを説明していたからです。

jqueryasp.net-mvc-5unobtrusive-validation
12
ThunD3eR

しばらくして、私はこれを理解しました。

私はAJAX呼び出しから部分的なビューを返したこのフォームを追加していました。

私は答えを見つけました ここ

このように動的データを追加するときは、最初に 'validator'と 'unobtrusiveValidation'のフォームを削除してから、次のようにフォームで$ .validator.unobtrusive.parse関数を呼び出す必要があります。

var form = $("#main_div").closest("form");
form.removeData('validator');
form.removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse(form);

より詳しい説明は here にあります

12
ThunD3eR