如何正确地覆盖"；jQuery不引人注目的验证；为css引导工作？

我有一个ASP.NETMVC5Base项目，在这个项目中，我使用css引导来设计我的页面

使用css引导处理属性。我希望能够覆盖

errorElement

，

errorClass

，

高亮显示

，

取消高亮显示

和

错误放置

属性/函数的默认行为

这就是我尝试过的

首先，我按照以下顺序包括了这些包

jQuery（v3.1.1）

jquery.validate.min.js（v1.15.0）

覆盖默认行为的我的设置（下面的代码）

jquery.validate.unobtrusive.js（v3.2.3）

这是我第一次尝试重写包

$.validator.setDefaults({
    errorElement: "span",
    errorClass: "help-block",
    highlight: function (element, errorClass, validClass) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function (element, errorClass, validClass) {
        $(element).closest('.form-group').removeClass('has-error');
    },
    errorPlacement: function (error, element) {

        var elm = $(element);

        console.log('errorPlacement was called');

        if (elm.parent('.input-group').length) {
            console.log('parent');
            console.log(elm.parent());
            error.insertAfter(elm.parent());
        }
        else if (elm.prop('type') === 'checkbox' || elm.prop('type') === 'radio') {
            error.appendTo(elm.closest(':not(input, label, .checkbox, .radio)').first());
        } else {
            error.insertAfter(elm);
        }
    }
});

但是，上述代码永远不会调用

errorPlacement

函数，除非其他所有功能都按预期工作。但是由于没有调用

errorPlacement

方法，因此错误被放置在不同的位置

然后我将上面的代码更改为（覆盖jQuery验证和不引人注目的验证）

现在，正在调用函数

errorPlacement

。但是，错误被多次插入。不知何故，代码删除了现在没有调用的错误消息

---

如何解决此问题？

这就是我如何覆盖jQuery非干扰性验证以使用Bootstrap 4的方法

$.validator.setDefaults({
errorClass:“”，
有效类：“，
突出显示：函数（元素、errorClass、validClass）{
$（元素）.addClass（“无效”）.removeClass（“有效”）；
$（element.form）.find（“[data valmsg for=“+element.id+”]”）addClass（“无效反馈”）；
},
取消高亮显示：函数（元素、errorClass、validClass）{
$（元素）.addClass（“有效”）.removeClass（“无效”）；
$（element.form）.find（“[data valmsg for=“+element.id+”]”）removeClass（“无效反馈”）；
},
});

将上述代码复制并粘贴到新文件中。将其命名为jquery.validate.overrides.js

编辑BundleConfig.cs。找到bundle

jqueryval

。在末尾添加新文件的路径

bundles.Add（新脚本包（“~/bundles/jqueryval”）。包括(
“~/Scripts/jquery.validate.js”，
“~/Scripts/jquery.validate.unobtrusive.js”，
“~/Scripts/jquery.validate.overrides.js”
));

要在视图中使用：

@LabelFor（m=>m.FirstName）
@TextBoxFor（m=>m.FirstName，新的{@class=“form control”，placeholder=“First name”，type=“text”}）
@Html.ValidationMessageFor（m=>m.FirstName）

那没用？您是否将

$.validator.setDefaults（）

放在文档就绪函数的内部或外部？它不起作用。是的，我把它放在

$（函数（）{…}）中块。为了确保我清楚什么不起作用，没有调用函数
errorPlacement
。但其余的都很好，这是你的问题。由于该插件不引人注目，您的
.setDefaults（）
将在
.validate（）
初始化后被调用。在这种情况下，强制在
.validate（）
之前调用
.setDefaults（）
的唯一方法是将其放在文档准备就绪之外。不太可能只忽略部分
.setDefaults（）
。解决方法是什么？阅读前面的评论：“在本例中，强制
.setDefaults（）
在
.validate（）
之前被调用的唯一方法是将它（setDefaults）放在文档准备就绪的外部。”这很好。但我发现的一个问题是，如果您通过了客户端验证，而服务器端验证失败，那么页面就不会添加引导类。你找到解决这个问题的方法了吗？
$.validator.setDefaults({
    errorElement: "span",
    errorClass: "help-block",
    highlight: function (element, errorClass, validClass) {
        console.log('highlight was called');
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function (element, errorClass, validClass) {
        console.log('highlight was called');
        $(element).closest('.form-group').removeClass('has-error');
    },
    errorPlacement: function (error, element) { }
});

$.validator.unobtrusive.options = {
    errorPlacement: function (error, element) {

        var elm = $(element);
        console.log('errorPlacement was called');

        if (elm.parent('.input-group').length || elm.parent('.input-group-custom').length) {
            console.log('parent');
            console.log(elm.parent());
            error.insertAfter(elm.parent());
        }
        else if (elm.prop('type') === 'checkbox' || elm.prop('type') === 'radio') {
            error.appendTo(elm.closest(':not(input, label, .checkbox, .radio)').first());
        } else {
            error.insertAfter(elm);
        }
    }
};