How to override a JQuery unobtrusive method without modifying jquery.validate.unobtrusive.min.js?

Question

I want to override the onErrors method in jquery.validate.unobtrusive.js to display error messages as hyper links to the html elements. However, I don't want to change the method in jquery.validate.unobtrusive.js since this file gets updated as newer versions become available. I have read that I can create an external JS file and include the onErrors function there. In my html file, if I include the external JS file AFTER I include jquery.validate.unobtrusive.js then it should automatically override the method in jquery.validate.unobtrusive.js. This is not happening.

Please note that I use jquery.validate.unobtrusive.min.js and the function is renamed from onErrors to k. I tried creating a function called 'k' in my external JS file but no such luck.

Thanks!

Answer 1

There is no need to modify the original jquery.validate.unobtrusive.js. The answer is something like this: How can I customize the unobtrusive validation in ASP.NET MVC 3 to match my style?

But you have to be careful: if you just change errorPlacement with your implementation probably the form will submit even when errors are present. To avoid that you need to preserve the content of the onError function of jquery.validate.unobtrusive.js.

Put this code in one of your files:

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

Answer 2

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

You can change the default onErrors by providing a different option since its overridable. No need to change the source code or override the built in function.

Answer 3

Overriding may happen when both functions are placed in global namespace. In case of jquery.validation.unobtrusive.js function onErrors is declared internally inside other function and cannot be replaced by declaring other function with the same name.

Seems there is no way to alter that function without changing source code.