Question

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

使用css bootstrap处理属性。我希望能够覆盖errorElement，errorClass，highlight，unhighlight和errorPlacement属性/函数的默认行为。

这就是我试过的

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

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验证和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

这是我的解决方案，可覆盖jQuery Unobtrusive Validation以与Bootstrap 4配合使用。

$.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.overrides.js。

然后编辑BundleConfig.cs并将其添加到包中的最后一个位置。

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

视图中：

<div class="form-group">
    @Html.LabelFor(m => m.FirstName)
    @Html.TextBoxFor(m => m.FirstName, new { @class = "form-control", placeholder = "First name", type = "text" })
    @Html.ValidationMessageFor(m => m.FirstName)
</div>

如何正确覆盖“jQuery Unobtrusive Validation”以适用于css bootstrap？

1 个答案: