如果验证失败,如何在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().

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

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

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

解决方法

猜你在找的asp.Net相关文章