Asp.Net MVC 5 Jquery 验证不适用于带有提交事件的 ajax 帖子，显示为有效表单

Question

我已添加有关客户端验证的所有必需内容，但验证不起作用。

请帮我找出我错过了什么或做错了什么。

我已经添加了所有需要的东西如下：

BundleConfig.cs

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*"));


bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.min.js",
                  "~/Scripts/umd/popper.min.js"));

查看：

@model WebApplication1.Areas.Users.Models.MyViewModel
<div>
    <!-- Modal content-->
    <div class="modal-content">
        @using (Html.BeginForm("detail", "mycontroller", null, FormMethod.Post, new { @Id="myForm", @class = "form-horizontal" }))
        {
        <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Unit Type</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
        <!-- Modal body -->
            <div class="modal-body">
                <div class="full-wdth clearfix otp-section">
                    @Html.AntiForgeryToken()
                    @Html.ValidationSummary(true)
                    @Html.HiddenFor(model => model.Id)
                    <div id="validation-summary"></div>
                    <div class="form-group">
                        @Html.LabelFor(model => model.Name, new { @class = "main-label requiredasterisk" })

                        @Html.TextBoxFor(model => model.Name, htmlAttributes: new { @class = "form-control form-control-sm", placeholder = "Name", maxlength = "50" })
                        @Html.ValidationMessageFor(model => model.Name)
                    </div>
                </div>
            </div>
        <!-- Modal footer -->
            <div class="modal-footer customMargin">
                <button data-dismiss="modal" id="btn-cancel" class="btn btn-default" type="button">Cancel</button>
                <button class="btn btn-primary" id="btn-submit" type="submit">
                    Submit
                </button>
            </div>
        }
    </div>
</div>

Layout.cshtml

@Scripts.Render("~/bundles/jquery", "~/bundles/jqueryval", "~/bundles/bootstrap")

WebConfig.cs：

<appSettings>
    <add key="webpages:Version" value="3.0.0.0" />
    <add key="webpages:Enabled" value="false" />
    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>

在显示 JS 文件的浏览器 HTML 页面上：

<script src="/Scripts/jquery-3.3.1.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>
<script src="/Scripts/umd/popper.min.js"></script>
<script src="/Scripts/perfect-scrollbar/perfect-scrollbar.min.js"></script>
<script src="/Scripts/XXXXXX.min.js"></script>
<script src="/Scripts/XXXXXXXX.js"></script>

在浏览器上提交 HTML 代码之前：

<div class="form-group">
   <label class="main-label requiredasterisk" for="Name">Name</label>    
   <input class="form-control form-control-sm" data-val="true" data-val-required="The name is required" id="Name" maxlength="50" name="Name" placeholder="Name" type="text" value="">
   <span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>
</div>

按下提交按钮后：

<div class="form-group">
  <label class="main-label requiredasterisk" for="Name">Name</label>    
  <input class="form-control form-control-sm valid" data-val="true" data-val-required="The name is required" id="Name" maxlength="50" name="Name" placeholder="Name" type="text" value="">
   <span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>
</div>

MyViewModel.cs：

public class MyViewModel
{            
    /// <summary>
    /// Id 
    /// </summary>
    public int Id { get; set; }

    /// <summary>
    /// name
    /// </summary>
    [Required(ErrorMessage = "The name is required")]
    [Display(Name = "Name")]
    public string Name { get; set; }    
}

jquery：

var BindFormSubmit = function (formControl, options) {
    "use strict";
    var settings = {};
    settings = $.extend({}, settings, options);
    formControl.validate(settings.validateSettings);
    formControl.submit(function (e) {
        var formdata = new FormData();         
        $.each(formControl.serializeArray(), function (i, item) {
            formdata.append(item.name, item.value);
        });


        var submitBtn = formControl.find(':submit');
        if (formControl.validate().valid()) {             
            $.ajax(formControl.attr("action"), {
                type: "POST",
                data: formdata,
                contentType: false,
                processData: false,
                success: function (result) {

                    //on success
                }
            });
        }
        e.preventDefault();
    });
    return formControl;
};


BindFormSubmit($("#myForm"), { updateTargetId: "validation-summary" });

Answer 1

除了将客户端提交事件与验证设置绑定之外，所有事情都是正确的。

因为

formControl.validate(settings.validateSettings);

正在覆盖验证并阻止默认的 MVC 验证，因此，我必须将上面的代码语句注释如下，它将完美运行。

var BindFormSubmit = function (formControl, options) {
    "use strict";
    var settings = {};
    settings = $.extend({}, settings, options);
    //formControl.validate(settings.validateSettings);
    formControl.submit(function (e) {
        var formdata = new FormData();         
        $.each(formControl.serializeArray(), function (i, item) {
            formdata.append(item.name, item.value);
        });


        var submitBtn = formControl.find(':submit');
        if (formControl.validate().valid()) {             
            $.ajax(formControl.attr("action"), {
                type: "POST",
                data: formdata,
                contentType: false,
                processData: false,
                success: function (result) {

                    //on success
                }
            });
        }
        e.preventDefault();
    });
    return formControl;
};


BindFormSubmit($("#myForm"), { updateTargetId: "validation-summary" });