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

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.答案是这样的:我如何在ASP.NET MVC 3中自定义不显眼的验证以匹配我的风格？

但是你必须要小心:如果你只是用你的实现更改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'); }
}