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

Posted 2023-05-08

【中文标题】如何解决 jquery-validate + bootstrap has-error 冲突

【英文标题】：How do I resolve jquery-validate + bootstrap has-error conflict

【发布时间】：2019-02-14 02:46:38

【问题描述】：

很抱歉，如果这是一个简单的解决方法，以及文字墙，但我已经搜索了网络和这个网站并找到了许多解决方案，但没有一个解决我的问题：

我有一个服务器端验证，以确保数据库中不存在同名的公司，请求触发，并返回预期的真/假结果和预期的 MVC 验证输出

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

但是，当用户跳出/点击输入字段时，验证会再次完成并显示成功，即使出现错误：

validation status

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

注意：此页面有多个表单（分成部分视图）

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

JS Fiddle

库/框架

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

【参考方案1】：

我发现了问题。

在我的捆绑包中：

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

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

validator.js 是一个引导插件，可在此处找到：github.com/1000hz/bootstrap-validator，所以我在此提出问题。

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