web-dev-qa-db-ja.com

ASP.NET MVCで、検証が失敗した場合にjqueryajax送信を防ぐ方法

ASP.NET 5 MVC RC1を使用しています

ASP.NET MVCが使用するjquery検証プラグインは、デフォルトのASP.NET5テンプレートプロジェクトが使用する標準のjquery.validate.jsです。

 /*!
 * 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を使用します。

   $(".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);
    });

このjquery関数は機能し、ボタンがクリックされるとコントローラーメソッドを呼び出します。ただし、String1がキャプチャされず、送信をクリックすると、検証が開始されてエラーメッセージが表示されますが、jquery関数は引き続きフォームをPOSTします。

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

検証メッセージが画面に表示されているので、自分で検証を行う必要はありません。送信を防ぐ必要があります

私のフォームで見つけることができるのは、個々の検証フィールドだけです。

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

また、フォームにはnovalidate=novalidateタグのみがあります。このタグはjquery.validate.jsが有効になっているすべてのフォームに追加されます。

jqueryasp.netajaxasp.net-mvcunobtrusive-validation
9
dfmetro

フォームが有効な場合にのみ、条件付きでajax呼び出しを行う必要があります。これは、次のJavaScriptコードで実行できます。

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

ドキュメントはここにあります： 。valid（） 。

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

注：コードを読み直すと、すべてのフォームに単一のハンドラーを使用していることがわかります。その場合、イベントをトリガーした形式で.valid()メソッドを呼び出す必要があります。これは、$(this)を介して使用できます。つまり、$(this).valid()を実行して、フォームが有効かどうかを確認します。

10
JotaBe

まず、e.preventDefault();を使用しないでください。送信ボタンがフォームを送信できなくなります。

$(".allforms").submit関数で、最初にフォームを検証します

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

フォームが適切に検証された場合、frmVlalidation値はtrueになります。検証が失敗した場合、falseが返されます。

この変数を使用して、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);
    });
4
Mayank Patel