如果验证失败,如何在ASP.NET MVC中阻止jquery ajax提交

Question

我在用 ASP.NET 5 MVC RC1

我的ASP.NET MVC使用的jquery验证插件是默认的ASP.NET 5模板项目使用的标准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.
*/

我在下面提供了一个简单的必填字段示例来演示我的问题.

视图模型:

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函数仍然是表单.

如果现有验证字段失败,如何防止jquery函数不调用ajax方法？

由于验证消息正在屏幕上显示,因此我无需进行自己的验证.我只需要阻止提交

在我的表单中我唯一能找到的是个别验证字段,例如

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

并且表单只有novalidate=novalidate标签,该标签将jquery.validate.js添加到启用的所有表单中.

Answer 1

只有在表单有效时才需要有条件地进行ajax调用,这可以通过以下javascript代码完成:

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

文档在这里:.valid().

请确认生成的页面中的表单ID确实存在form1.如果没有,您可以使用其他选择器,或者获取将由Razor代码生成的id的方法.

注意:当我重读您的代码时,我可以看到您正在为所有表单使用单个处理程序.在这种情况下,您必须.valid()以触​​发事件的形式调用该方法,该事件可以使用$(this).即,$(this).valid()检查表格是否有效.

Answer 2

在这个插件中使用ajax的正确方法是将ajax放在插件的submitHandler回调函数中.

"经过验证后,通过Ajax提交表单的正确位置."

从文档

示例:有效时通过Ajax提交表单.

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

这确保了如果表单有效,则仅提交表单.

Answer 3

首先不要使用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);
    });