web-dev-qa-db-ja.com

控えめな検証はAjax.BeginFormでは機能しません

私はAjax.BeginForm()を置くModel1のビューを持ち、このビューではAjax.BeginForm()を置くModel2のPartialViewを持っています。したがって、最初のフォームでのみunobtrusive validation。なぜ最初の形式の作業検証でのみですか？

最初のビュー

@model Model1

@using (Ajax.BeginForm("Action1","Controller",null,new AjaxOption(){ onSuccess = "alert('=)')"},null)
{

   <intput type="submit" value="Save" />
}


Model2 model2 = new Model2();
@Html.EditorFor(m=>model2)

** Model2ビューで私は持っています。 **

@model Model2 
@using (Ajax.BeginForm("AddStreet","Controller",new AjaxOption(){onSuccess = "alert('=)'")},option,null)
{

        @Html.LabelFor(m => Model.Name):
        @Html.TextBoxFor(m => Model.Name)
        @Html.ValidationMessageFor(m => Model.Name)

       <intput type="submit" value="Save" />
}

回答について@Darin Dimitrovに感謝します。

asp.net-mvcasp.net-mvc-3unobtrusive-validation
33
Oleksandr Fentsyk

これは、2番目のビューがAJAX=で後の段階でロードされるため、控えめな検証を有効にするために、その内容がDOMに挿入された直後に$.validator.unobtrusive.parse(...)を呼び出す必要があるためです詳細については、 ブログ投稿をフォロー をご覧ください。

したがって、あなたの場合、最初のAJAX呼び出しのOnSuccessコールバックでalertingの代わりに、このメソッドを呼び出すjavascript関数にサブスクライブします。

@using (Ajax.BeginForm(
    "Action1",
    "Controller",
    null,
    new AjaxOptions { 
        OnSuccess = "onSuccess",
        UpdateTargetId = "result"
    },
    null)
)
{
    <input type="submit" value="Save" />
}

そして、あなたのjavascriptファイルで：

var onSuccess = function(result) {
    // enable unobtrusive validation for the contents
    // that was injected into the <div id="result"></div> node
    $.validator.unobtrusive.parse($(result));
};
55
Darin Dimitrov

これらの2つのファイルを追加する必要がありますPartial View既にShared/_Layout.cshtmlにある場合でも：

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

または、これをPartialに配置します。

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

Darin Dimitrovの答えは、Ajax成功ハンドラーが呼び出されるまで_jquery validate plugin_のvalidate()が呼び出されない場合にのみ機能します。これが当てはまるシナリオは考えられないので、なぜ答えが正しいと受け入れられたのだろうか。

過去のjquery検証コードの変更により、次の問題が発生する可能性があります。

問題は、validate()が最初に次の行を実行することです

_// Check if a validator for this form was already created
var validator = $.data( this[ 0 ], "validator" );
if ( validator ) {
  return validator;
_

つまり、validatorオブジェクトは、validate（）が呼び出されたときに返され、渡されたオプションのさらなる処理が返されます。

これは、後で$.validator.unobtrusive.parse(...)または$.validator.unobtrusive.parseElement(...)を呼び出して、

_$form.validate(this.options) <- this.options holds the new rules parsed from HTML
_

オプションがまったく処理されないため、バリデータのオプションを更新しても効果はありません。

ここでの解決策は、次のようにバリデータを手動で更新することです

_var $htmlCode = $("your html");

$.validator.unobtrusive.parse($htmlCode, true); // true means no validate() call

// now get the validation info collected in parse()
var validationInfo = $form.data("unobtrusiveValidation"); 

var $validator = $form.validate(); // get validator and ...
$validator.settings.rules = validationInfo.options.rules; // ... update its rules
$validator.settings.messages = validationInfo.options.messages; // ... update its messages
_

フォームの再検証（たとえば、[送信]をクリック）すると、期待どおりの結果が得られるはずです。

魔女の完全な例は、すでに受け入れられている答えのコードも含まれています。

カミソリ

_@using (Ajax.BeginForm(
    "Action1",
    "Controller",
    null,
    new AjaxOptions { 
        OnSuccess = "onSuccess",
        UpdateTargetId = "result"
    },
    null)
)
{
    <input type="submit" value="Save" />
}
_

Javascript

_var onSuccess = function(result) {
    var $htmlCode = $(result);

    $.validator.unobtrusive.parse($htmlCode, true); // true means no validate() call

    // now get the validation info collected in parse()
    var validationInfo = $form.data("unobtrusiveValidation"); 

    var $validator = $form.validate(); // get validator and ...
    $validator.settings.rules = validationInfo.options.rules; // ... update its rules
    $validator.settings.messages = validationInfo.options.messages; // ... update its messages
};
_

-

サイドノートとして、次のようなrules()メソッドを使用して、バリデーターを手動で更新することもできます。

_$yourHtmlField.rules( "add", {
  required: true,
  messages: {
    required: "Required input"
  }
});
_

これは控えめなものなしでバリデータのルールを直接更新するためです。ただし、その後、data-val属性は役に立たなくなります。

2
ViRuSTriNiTy

jquery.unobtrusive-ajax.js内の検証を有効にするには、Ajax Formへの参照を追加する必要があります

このようなもの：

<script type="text/javascript" src="/Scripts/jquery.unobtrusive-ajax.js"></script>
2
gdoron

このソリューションは私に最適です。

$.validator.unobtrusive.parse(document);
1
JeremyFromNaples