101

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 に情報を入力しなくても、submit イベントでアラート ('valid') が表示されます。

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

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

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

4

7 に答える 7

239

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

動的要素をフォームに追加するときにできることは、次のいずれかです

  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. unobtrusiveValidationjquerydataメソッドを使用してフォームのデータにアクセスします。

    $(form).data('unobtrusiveValidation')

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

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

于 2013-02-20T14:38:32.907 に答える
6

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

 $(function () {
        //parsing the unobtrusive attributes when we get content via ajax
        $(document).ajaxComplete(function () {
            $.validator.unobtrusive.parse(document);
        });
    });
于 2015-01-18T10:52:44.603 に答える
0

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

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

;)

于 2018-09-09T05:12:04.523 に答える