web-dev-qa-db-ja.com

控えめな検証が動的コンテンツで機能しない

AJAX呼び出しを介して動的にロードされる部分ビューで動作する控えめなjquery検証を取得しようとすると、問題が発生します。

私は、このコードを運良く動作させるために何日も費やしてきました。

ビューは次のとおりです。

@model MvcApplication2.Models.test

@using (Html.BeginForm())
{
 @Html.ValidationSummary(true);
 <div id="res"></div>
 <input id="submit" type="submit" value="submit" />
}

部分的なビュー：

@model MvcApplication2.Models.test

@Html.TextAreaFor(m => m.MyProperty);
@Html.ValidationMessageFor(m => m.MyProperty);

<script type="text/javascript" >
  $.validator.unobtrusive.parse(document);
</script>

モデル：

  public class test
  {
    [Required(ErrorMessage= "required field")]
    public int MyProperty { get; set; }
  }

コントローラー：

    public ActionResult GetView()
    {
        return PartialView("Test");
    }

そして最後に、javascript：

$(doument).ready(function () {
$.ajax({
    url: '/test/getview',
    success: function (res) {

        $("#res").html(res);
        $.validator.unobtrusive.parse($("#res"));
    }
});

$("#submit").click(function () {
    if ($("form").valid()) {
        alert('valid');
        return true;
    } else {
        alert('not valid');
        return false;
    }
});

検証は機能しません。 texboxに情報を入力しなくても、送信イベントにアラートが表示されます（「有効」）。

ただし、ビューを動的にロードする代わりに、@Html.Partial("test", Model)を使用してメインビューで部分ビューをレンダリングする場合（およびAJAX呼び出しを行わない場合）、検証は正常に機能します。

これはおそらく、コンテンツを動的にロードする場合、コントロールがまだDOMに存在しないためです。しかし、私は$.validator.unobtrusive.parse($("#res"));の呼び出しを行います。これは、新しく読み込まれたコントロールについてバリデーターに許可するのに十分なはずです...

誰でも助けることができますか？

asp.net-mvc-4unobtrusive-validation
91
Sam

すでに解析されているフォームを解析しようとしても更新されません

フォームに動的要素を追加するときにできることは

  1. フォームの検証を削除して、次のように再検証できます。

    var form = $(formSelector)
    .removeData("validator") /* added by the raw jquery.validate plugin */
    .removeData("unobtrusiveValidation");  /* added by the jquery unobtrusive plugin*/

$.validator.unobtrusive.parse(form);

  2. Jquery unobtrusiveValidationメソッドを使用して、フォームのdataデータにアクセスします。

    $(form).data('unobtrusiveValidation')

    次に、ルールコレクションにアクセスし、新しい要素の属性を追加します（これはやや複雑です）。

フォームに動的要素を追加するために使用されるプラグインの ASP.Net MVCの動的コンテンツへの控えめなjquery検証の適用 に関する記事もご覧ください。このプラグインは2番目のソリューションを使用します。

215
Nadeem Khedr

Nadeem Khedrの答えに加えて...

フォームをDOMに動的にロードしてから呼び出す場合

jQuery.validator.unobtrusive.parse(form);

（追加のビットが記載されています）そして、ajaxを使用してそのフォームを送信します

$(form).valid()

これは、フォームを送信する前にtrueまたはfalseを返します（実際の検証を実行します）。

19
Mark Jerzykowski

これを_Layout.cshtmlに追加します

 $(function () {
        //parsing the unobtrusive attributes when we get content via ajax
        $(document).ajaxComplete(function () {
            $.validator.unobtrusive.parse(document);
        });
    });
5
AHmed Ibrahim

これをテストします：

if ($.validator.unobtrusive != undefined) {
    $.validator.unobtrusive.parse("form");
}
3
Omid-RH

驚いたことに、この質問を見たとき、ASP.NETの公式ドキュメントには、控えめなparse()メソッドや動的コンテンツでの使用方法に関する情報がまだありませんでした。ドキュメントリポジトリで issue を作成し（@Nadeemの元の回答を参照）、それを修正するためにプルリクエストを送信しました。この情報は、モデル検証トピックの クライアント側検証 セクションに表示されます。

3
Rabadash8820

私は同じ問題に襲われ、これ以外は何も機能しませんでした：

$(document).ready(function () { 
    rebindvalidators();
});

function rebindvalidators() {
    var $form = $("#id-of-form");
    $form.unbind();
    $form.data("validator", null);
    $.validator.unobtrusive.parse($form);
    $form.validate($form.data("unobtrusiveValidation").options);
}

そして追加

// Check if the form is valid
var $form = $(this.form);
if (!$form.valid())
    return;

フォームを保存しようとしている場所。

Ajax呼び出しでフォームを保存していました。

これが誰かを助けることを願っています。

1
Jay

モーダルコードの最後にこのコードをもう一度コピーするだけです

    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

;）

0
mohammad miraali