jquery - 如何正确覆盖 "jQuery Unobtrusive Validation"以用于 css bootstrap？

Question

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

使用 css bootstrap 来处理属性。我希望能够覆盖 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

这就是我重写 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.name + '"]').addClass("invalid-feedback");
    },
    unhighlight: function (element, errorClass, validClass) {
        $(element).addClass("is-valid").removeClass("is-invalid");
        $(element.form).find('[data-valmsg-for="' + element.name + '"]').removeClass("invalid-feedback");
    },
});

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

编辑 BundleConfig.cs。找到包 jqueryval。在末尾添加新文件的路径。

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

在 View 中使用:

<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>