使用不显眼的验证时表单不发布答案

【问题标题】：Form not posting when using unobtrusive validation使用不显眼的验证时表单不发布
【发布时间】：2017-10-14 14:22:38
【问题描述】：

我已经尝试解决这个问题几个小时了，但似乎无法找出这里出了什么问题。

我有一个视图，其中包含一些我想发布到我的控制器的字段。现在，我想在客户端检查验证错误。我之前在几个项目中使用过这个，添加： - jquery.js（版本 1.12.1） - jquery.validate.js（版本 1.14.0） - jquery.validate.unobtrusive.js（版本 3.2.3） - jquery-unobtrusive-ajax.js（版本 3.2.3）

只要我引用 jquery.validate.unobtrusive.js，客户端验证就可以工作。但是当我按下提交按钮时，它就不再提交表单了。它只是不会击中控制器。

我的看法如下：

<div class="row">
<div class="col-md-12">
    <div class="portlet light bordered">
        <div class="portlet-title">
            <div class="caption">
                <span class="caption-subject bold uppercase font-dark">Auto toevoegen</span>
            </div>
            <div class="actions">
                @Html.ActionLink("Terug", "Index", null, new { @class = "btn btn-circle green btn-outline btn-sm" })
            </div>
        </div>
        <div class="portlet-body">
            @using (Html.BeginForm("Create", "Car", FormMethod.Post, new { @class = "form-horizontal" }))
            {
                @Html.AntiForgeryToken()

                <div class="form-horizontal">

                    @Html.ValidationSummary(true)
                    @Html.HiddenFor(model => model.Id)

                    <div class="form-group">
                        @Html.LabelFor(model => model.Merk, new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.Merk, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Merk)
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.Type, new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.Type, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Type)
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.Kenteken, new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.Kenteken, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Kenteken)
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.Kilometervergoeding, new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.Kilometervergoeding, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Kilometervergoeding)
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.Name, new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Name)
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.AccountNumber, new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.AccountNumber, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.AccountNumber)
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.DefaultCar, new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.DefaultCar)
                            @Html.ValidationMessageFor(model => model.DefaultCar)
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-offset-2 col-md-10">
                            <input type="submit" value="Opslaan" class="btn blue" />
                            @Html.ActionLink("Annuleren", "Index", null, new { @class = "btn btn-white" })
                        </div>
                    </div>
                </div>
            }
        </div>
    </div>
</div>

我的控制器动作如下所示：

        [HttpPost]
    [DisableValidation]
    public ActionResult Create(CarViewModel model)
    {
        if(!ModelState.IsValid)
        {
            return View(model);
        }

        try
        {
            var tblCar = mapper.Map<CarViewModel, tblCar>(model);

            _carAppService.Insert(tblCar);
            return RedirectToAction("Index");
        }
        catch(Exception ex)
        {
            //Add proper error messages
            Logger.Debug("Error occured during car adding process: " + ex.InnerException);

            //add common container with errors
            TempData["Error"] = "Er is iets fout gegaan :(";
            return RedirectToAction("Index");
        }
    }

脚本在启动时以捆绑包的形式加载，并按上述顺序加载。现在，只要我从我的包配置中删除 jquery.validate.unobtrusive，提交按钮就会起作用。但是，客户端验证不再起作用。

有人知道这里发生了什么吗？谢谢！

【问题讨论】：

任何我们应该知道的专门用于提交按钮的javascript？如果它没有击中控制器，听起来验证肯定会阻止提交。
不！按钮后面没有javascript。是的，看起来验证阻止了提交给控制器。但我在控制台中看不到任何消息或错误。
查看我的项目，我们似乎总是按以下顺序包含它们：jquery-{version}.js、jquery.unobtrusive*、jquery.validate*。此外，对于 jquery，1.12.1 似乎非常过时，特别是因为您的 jquery.validate 是更高版本 - 可能是不兼容问题。最后，您使用的是默认的jqueryval 捆绑包吗？因为在_Layout视图上默认不渲染，需要在你的视图上手动引用：@section Scripts { @Scripts.Render("~/bundles/jqueryval") }
嗯，我将 jquery 更新到 2.2.4，但在验证之前无法加载不显眼。如果我这样做，它会给出“Uncaught TypeError: Cannot set property 'unobtrusive' of undefined”错误。顺便说一句，我使用的是 asp.net 样板零模板。它按以下顺序加载脚本：1. JQuery 2. JQuery_Validation 3. JQuery_Unobtrusive 4. Jquery_Unobtrusive_Ajax
有趣。尽管如此，您确定脚本正在正确加载吗？也许使用 Chrome 开发工具或类似工具来验证它们是否正在加载，然后在单击提交按钮时查看是否有任何网络活动（可能是错误的 url？）。另外值得检查的是错误消息的文本颜色是否与背景相同，所以您只是看不到它们？

标签： c# jquery asp.net asp.net-mvc validation

【解决方案1】：

好的，我解决了这个问题！

这个答案很可能只有在您使用 ASP.NET 样板零模板时才有用。

在 ~/Common/Scripts 中添加了一个 Javascript 文件 (jquery-validation-custom.js)。

内容与提交按钮混淆。我用我自己的模态验证处理程序版本替换了它，现在它可以工作了！

【讨论】：