Question

很抱歉，如果这是一个简单的解决方法，那么很遗憾，但我已经搜索了网络和该站点，发现了许多解决方案，但都没有解决我的问题：

我有一个服务器端验证，以确保数据库中没有同名公司，该请求将被触发，并返回预期结果为true / false以及MVC验证输出。

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

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

validation status

我可以看到失去焦点时有错误和有成功的变化，我假设是引导验证正在执行，因为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);
        }
    }
});

Answer 1

我发现了问题。

在我的捆绑包中，我拥有：

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

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

validator.js是可在此处找到的引导程序插件：github.com/1000hz/bootstrap-validator，因此我在此处提出了问题。

引入第三方插件时，我将必须更加小心，并更多地使用自己的：p

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

1 个答案: