jquery - 如何在不修改 jquery.validate.unobtrusive.min.js 的情况下重写 JQuery unobtrusive 方法？

Question

我想重写 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”的函数，但没有那么幸运。

谢谢!

Answer 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'); }
}