如何正确覆盖“ jQuery Unobtrusive Validation”以用于CSS引导程序？

Question

我有一个ASP.NET MVC 5基础项目，在其中使用css引导程序来设计页面。

使用CSS引导程序来工作属性。我希望能够覆盖errorElement，errorClass，highlight，unhighlight和errorPlacement属性/功能的默认行为。

这是我尝试过的

首先，我按以下顺序包含了软件包

1. jQuery（v3.1.1）
2. jquery.validate.min.js（v1.15.0）
3. 我的设置将覆盖默认行为（下面的代码）
4. 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验证和Unobtrusive）

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

现在正在调用功能errorPlacement。但是，该错误被多次插入。某种程度上，删除错误消息的代码现在没有被调用。

如何解决此问题？

Answer 1

这是将Bootstrap 4类与jQuery Unobtrusive Validation结合使用的解决方案。

它会清空默认的错误/有效的类，因为输入和验证消息都不需要相同的类名。

将is-invalid添加到输入元素，并将invalid-feedback添加到验证消息。

$.validator.setDefaults({
    errorClass: "",
    validClass: "",
    highlight: function (element, errorClass, validClass) {
        $(element).addClass("is-invalid").removeClass("is-valid");
        $(element.form).find("[data-valmsg-for=" + element.id + "]").addClass("invalid-feedback");
    },
    unhighlight: function (element, errorClass, validClass) {
        $(element).addClass("is-valid").removeClass("is-invalid");
        $(element.form).find("[data-valmsg-for=" + element.id + "]").removeClass("invalid-feedback");
    },
});

必须包含上面的代码之后 jquery.validate.js和jquery.validate.unobtrusive.js。

我创建了文件jquery.validate.defaults.js，并编辑了BundleConfig.cs以将其包含在分发包中：

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