如何解决 jquery-validate + bootstrap has-error 冲突

Question

如果这是一个简单的修复，我很抱歉，虽然我已经搜索了网络和这个网站并找到了很多解决方案，none 解决了我的问题：

我有一个服务器端验证以确保数据库中不存在同名的公司，请求触发，returns 预期结果为 true/false 和 MVC 验证输出正如预期

bootstrap 和 jquery 验证会在用户输入时正确处理响应和输出，任何重复项都会显示正确的错误消息。

然而，当用户退出/点击输入字段时，再次进行验证并显示成功，即使出现错误也是如此：

validation status

我可以看到 has-error 和 has-success 在失去焦点时发生变化，我假设它是 bootstrap 验证，因为 MVC 错误消息仍然存在，但是 jquery.validation.definition 设置应该已经处理了？

注：本页有多个表单（分为部分视图）

我看到了验证设置的不同设置，但是我所拥有的是我可以开始工作的壁橱....非常感谢任何帮助。

JS Fiddle

libraries/frameworks

- .net MVC 5
- bootstrap 4 
- jquery
- jquery-validate
- jquery-validate-unobtrusive

网站先决条件：

web.config

<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>

Layout.cshtml

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

BundleConfig.cs

//Bootstrap
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
    "~/scripts/components/bootstrap/bootstrap.js",
    "~/Scripts/components/respond.js",
    "~/Scripts/components/vendor/validator.js"
));

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
    "~/Scripts/jquery.validate.js",
    "~/Scripts/components/jQuery/validate/jquery.validate.definition.js"
));

bundles.Add(new ScriptBundle("~/bundles/jqueryvalidateUnobtrusive").Include(
    "~/Scripts/jquery.validate.unobtrusive.js",
));

代码：

控制器（SupportCompany.cs）

    public JsonResult SupportCompanyValidation(string Name)
    {
        //procedureValues = dbObject.checkDataType(supportCompany);

        var result = dbObject.SQLConnection("Select_Support_Companies", "@NAME = N'" + Name + "'");
        message = result.Item1;
        payload = result.Item2;
        bool notExists = true;

        if (payload.Rows.Count > 0)
        {
            notExists = false;
        }

        return Json(notExists, JsonRequestBehavior.AllowGet);
    }

型号（SupportCompany.cs）

    [Remote("SupportCompanyValidation", "SupportCompany", ErrorMessage = "Company name already exists")]
    public string Name { get; set; }

查看 (index.cshtml)

<div class="form-group has-feedback">
    <label for="Name" class="col-md-4 control-label">@Html.LabelFor(m => m.Name, "Name:")</label>
    <div class="col-md-4 inputGroupContainer">
        <div class="input-group">
            <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
            @Html.TextBoxFor(m => m.Name, new { placeholder = "Company Name", @class = "form-control", required = "required" })
        </div>
            <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
     </div>
     <label class="help-block with-errors">*@Html.ValidationMessageFor(m => m.Name)</label>
</div>

jquery.validate.unobtrusive 兼容性设置 (jquery.validate.definition.js)

$.validator.setDefaults({
    highlight: function (element) {
        $(element).closest('.form-group').removeClass("has-success").addClass('has-error');
    },
    unhighlight: function (element) {
        $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
    },
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function (error, element) {
        if (element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
});

Answer 1

我发现了问题。

我的捆绑包中有：

"~/Scripts/components/vendor/validator.js"

这是从第三方 table 插件引入的，但它与 bootstrap + MVC 集成冲突。

validator.js 是在这里找到的 bootstrap 插件：github。com/1000hz/bootstrap-validator 所以我在那里提出问题。

我将不得不更加小心地引入第三方插件并制作更多我自己的插件:p

如何解决 jquery-validate + bootstrap has-error 冲突

How do I resolve jquery-validate + bootstrap has-error conflict

asp.net-mvc

jquery

jquery-validate

twitter-bootstrap