jquery - 如果验证失败，如何在 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.
*/

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

View 模型:

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 函数可以工作，并在单击按钮时调用我的 Controller 方法。 但是，当未捕获 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() 来检查表单是否有效。