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

我在用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添加到所有启用它的表单。

仅当表单有效时，您才需要有条件地进行 ajax 调用，这可以使用以下 javascript 代码来完成：

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

文档在这里：.valid() http://jqueryvalidation.org/valid.

请验证生成页面中表单的id确实是form1。如果没有，您可以使用其他选择器，或者获取将由 Razor 代码生成的 id 的方法。

注意：当我重新阅读您的代码时，我可以看到您对所有表单使用单个处理程序。在这种情况下，您必须致电.valid()触发事件的表单中的方法，可以通过$(this)。即，做$(this).valid()检查表格是否有效。