ASP.NET MVCで防ぐ方法jqueryのAJAX提出し、私は私のASP.NET MVCは、標準jquery.validate.jsそのデフォルトASP.NETで使用しています<code>ASP.NET 5 MVC RC1</code></p> <p>jQueryの検証プラグインを使用しています

Question

検証が失敗した場合5テンプレートプロジェクトの使用。

/*! 
* jQuery Validation Plugin v1.14.0 
* 
* http://jqueryvalidation.org/ 
* 
* Copyright (c) 2015 Jörn Zaefferer 
* Released under the MIT license 
*/ 

とjquery.validation.unobtrusive.js

/*! 
** Unobtrusive validation support library for jQuery and jQuery Validate 
** Copyright (C) Microsoft Corporation. All rights reserved. 
*/ 

私は私の問題を示すために、以下の簡単な必須フィールドの例を提供します。

のViewModel：

public class TierImportStatusUpdateViewModel 
{ 
    [Required] 
    public string String1 { get; set; } 
    [Required] 
    public string String2 { get; set; } 
    //more fields 
} 

CSHTML：

@model MyViewModel 
<form action="/controller/action" data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#dic1" id="form1" method="post" class="allforms"> 
    @Html.LabelFor(model=>model.String1) 
    @Html.EditorFor(model=>model.String1) 
    @Html.ValidationMessageFor(model=>model.String1) 
    <br> 
    @Html.LabelFor(model=>model.String2) 
    @Html.EditorFor(model=>model.String2) 
    @Html.ValidationMessageFor(model=>model.String2) 
    <br> 
    <button type="submit" class="btn btn-primary" id="submit" name="submit">submit</button> 
</form> 

上記の検証が正常に動作します。 String1がフォームにキャプチャされていない場合、POSTメソッドは呼び出されず、クライアント側でエラーメッセージが表示されます。

私は、すべてのフォームが提出キャッチし、いくつかの追加のロジックを実行するために好きな私は、次のjQueryを使用します。このjqueryの機能が動作

$(".allforms").submit(function (e) { 

     e.preventDefault(); 

     var self = this; 
     $.ajax({ 
      processData: false, 
      contentType: false, 
      data: new FormData(this), 
      type: $(this).attr('method'), 
      url: $(this).attr('action'), 
      success: function (data) { 
       //other logic 
      } 
     }); 

     return (false); 
    }); 

と、ボタンがクリックされたとき、私のコントローラメソッドを呼び出します。 しかし、String1がキャプチャされずに送信がクリックされると、検証が行われ、エラーメッセージが表示されますが、jquery関数はまだフォームにポストします。

既存の検証フィールドが失敗した場合、jQuery関数がajaxメソッドを呼び出さないようにするにはどうすればよいですか？

検証メッセージが画面に表示されているため、私自身の検証を行う必要はありません。私はちょうど私が私の形で見つけることができる唯一のことは、個々の検証フィールドは

<span class="text-danger field-validation-valid" data-valmsg-for="String1" data-valmsg-replace="true"></span> 

例えば、フォームだけjquery.validate.jsはそれがすべてのフォームに追加しますnovalidate=novalidateタグを持っている

提出を防止する必要がありますオンになっています。

Answer 1

あなたは条件付きでフォームはこのJavaScriptコードで行うことができ、有効である場合にのみ、AJAX呼び出しを行う必要があります。ドキュメントはここにある

if ($("#form1").valid()) { 
    // make the ajax call 
} 

：.valid()。

生成されたページのフォームのIDが実際にform1であることを確認してください。そうでない場合は、使用できる代替セレクタ、またはRazorコードによって生成されるIDを取得する方法があります。

注：コードを再読み込みすると、すべてのフォームに対して1つのハンドラを使用していることがわかります。その場合、イベントを発生させたフォームで.valid()メソッドを呼び出す必要があります。このメソッドは$(this)から利用できます。つまり、フォームが有効かどうかを確認するには$(this).valid()を実行します。

Answer 2

最初に使用しないでください。e.preventDefault();送信ボタンがフォームを送信できないようにします。あなたのフォームがfrmVlalidation値は検証が失敗した場合、それはfalseを返しますtrueになり、適切に検証された場合は、最初のご$(".allforms").submit機能で

このvar frmVlalidation = $('#formId').valid();

のようなフォーム

を検証します。

この変数呼び出しajaxを使用します。

このようです。

$(".allforms").submit(function (e) { 

     var frmVlalidation = $('#formId').valid(); 

     if (frmVlalidation == true) 
     { 
     var self = this; 
     $.ajax({ 
      processData: false, 
      contentType: false, 
      data: new FormData(this), 
      type: $(this).attr('method'), 
      url: $(this).attr('action'), 
      success: function (data) { 
       //other logic 
      } 
     }); 
     } 

     return (false); 
    }); 

Answer 3

このプラグインでajaxを使用する適切な方法は、プラグインのsubmitHandlerコールバック関数の内側にajaxを置くことです。ドキュメント

例から

"The right place to submit a form via Ajax after it is validated."

次の場合に有効なAjaxを経由してフォームを送信します。

$(".selector").validate({ 
    submitHandler: function(form) { 
    $(form).ajaxSubmit(); 
    } 
}); 

これにより、フォームが有効な場合はフォームのみが送信されます。