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

首先不要使用 e.preventDefault(); 它会阻止提交按钮提交表单。

在你的 $(".allforms").submit 函数中首先验证你的表单

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

如果您的表单验证正确 frmVlalidation 值将是 true 如果验证失败它将是 return 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);
    });

Answer 3

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

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

来自文档

示例：在有效时通过 Ajax 提交表单。

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

这确保如果表单有效则仅提交表单。

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

How to in ASP.NET MVC prevent jquery ajax submit if validation fails

asp.net

ajax

asp.net-mvc

jquery

unobtrusive-validation