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回调函数中。

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

来自文档

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

    PopUpMenu GetCurrentPopUpMenu()
    {
        List<Window> windows = WindowFactory.Desktop.DesktopWindows();
        foreach (Window w in windows)
        {
            if (w.Name == "") return w.Popup;
        }

        return null;
    }

这确保了如果表单有效，则只提交表单。

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);
    });

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

3 个答案: