如何在不修改 jquery.validate.unobtrusive.min.js 的情况下覆盖 JQuery 不显眼的方法？答案

【问题标题】：How to override a JQuery unobtrusive method without modifying jquery.validate.unobtrusive.min.js?如何在不修改 jquery.validate.unobtrusive.min.js 的情况下覆盖 JQuery 不显眼的方法？
【发布时间】：2011-09-15 20:14:37
【问题描述】：

我想覆盖 jquery.validate.unobtrusive.js 中的 onErrors 方法，以将错误消息显示为指向 html 元素的超链接。但是，我不想更改 jquery.validate.unobtrusive.js 中的方法，因为该文件会随着新版本的可用而更新。我读过我可以创建一个外部 JS 文件并在其中包含 onErrors 函数。在我的 html 文件中，如果我在包含 jquery.validate.unobtrusive.js 之后包含外部 JS 文件，那么它应该自动覆盖 jquery.validate.unobtrusive.js 中的方法。这没有发生。

请注意，我使用 jquery.validate.unobtrusive.min.js 并且函数从 onErrors 重命名为 k。我尝试在我的外部 JS 文件中创建一个名为“k”的函数，但没有这样的运气。

谢谢！

【问题讨论】：

你能把链接发到你读过的地方吗？我查看了缩小的文件，认为您很难做到这一点。
是的，发布一些代码，让我们知道您尝试了什么。

标签： jquery validation overriding

【解决方案1】：

不需要修改原来的jquery.validate.unobtrusive.js。答案是这样的：How can I customize the unobtrusive validation in ASP.NET MVC 3 to match my style?

但是你必须小心：如果你只是用你的实现改变了errorPlacement，即使出现错误，表单也可能会提交。为避免这种情况，您需要保留 jquery.validate.unobtrusive.js 的 onError 函数的内容。

将此代码放入您的文件之一：

var $form = $("form.edit-form")
    var validator = $form.data('validator');

validator.settings.errorPlacement = $.proxy(onError, $form);

function onError(error, inputElement) {
    //Original code of the onError function inside jquery.validate.unobtrusive
    //------------------------------------------------------------------------
    var container = $(this).find("[data-valmsg-for='" + inputElement[0].name + "']"),
        replace = $.parseJSON(container.attr("data-valmsg-replace")) !== false;

    container.removeClass("field-validation-valid").addClass("field-validation-error");
    error.data("unobtrusiveContainer", container);

    if (replace) {
        container.empty();
        error.removeClass("input-validation-error");
    }
    else {
        error.hide();
    }

    //END of Original code of the onError function inside jquery.validate.unobtrusive
    //-------------------------------------------------------------------------------

    //Do whatever you want here, in my case I'm using qTip to show the errors
    var element = inputElement;
    // Set positioning based on the elements position in the form
    var elem = $(element);

    // Check we have a valid error message
    if (!error.is(':empty')) {
        // Apply the tooltip only if it isn't valid
        elem.filter(':not(.valid)').qtip({
            overwrite: false,
            content: error,
            position: {
                my: 'left middle',
                at: 'right middle',
                viewport: $(window)
            },
            show: {
                event: false,
                ready: true
            },
            hide: false,
            style: {
                classes: 'ui-tooltip-red' // Make it red... the classic error colour!
            }
        })

        // If we have a tooltip on this element already, just update its content
        .qtip('option', 'content.text', error);
    }

        // If the error is empty, remove the qTip
    else { elem.qtip('destroy'); }
}

【讨论】：

【解决方案2】：

How can I customize the unobtrusive validation in ASP.NET MVC 3 to match my style?

您可以通过提供不同的选项来更改默认的 onErrors，因为它是可覆盖的。无需更改源代码或覆盖内置函数。

【讨论】：

【解决方案3】：

当两个函数都放在全局命名空间中时，可能会发生覆盖。在 jquery.validation.unobtrusive.js 函数的情况下，onErrors 是在其他函数内部声明的，并且不能通过声明具有相同名称的其他函数来替换。

似乎没有办法在不更改源代码的情况下更改该功能。

【讨论】：