Override method inside jquery widget

Question

I'm trying to override a method inside a jquery widget. The method can be found on line 122 at https://github.com/got5/tapestry5-jquery/blob/master/src/main/resources/org/got5/tapestry5/jquery/validation.js

Id like to alter the html output on line 141

I've tried adding the following to my custom js class without success. If anybody could explain how to do this, id greatly appreciate it.

(function($) {    
$.widget( "ui.tapestryFieldEventManager", {
    showValidationMessage : function(message) {
        var field = this.element;
        var form = field.closest('form');

        this.options.validationError = true;
        form.formEventManager("setValidationError", true);

        field.addClass("t-error");

        this.getLabel() && this.getLabel().addClass("t-error");

        var icon = this.getIcon();

        if (icon) icon.show();
        alert("here");
        var id = field.attr('id')+"\\:errorpopup";
        if($("#"+id).size()==0) //if the errorpopup isn't on the page yet, we create it
            field.after("<div id='"+field.attr('id')+":errorpopup' class='tjq-error-popup test'/>");
        Tapestry.ErrorPopup.show($("#"+id),"<span>"+message+"</span>");

    }
});
})(jQuery);

Answer 1

You have to override it on the prototype.

var oldMethod = $.ui.tapestryFieldEventManager.prototype.showValidationMessage;    
$.ui.tapestryFieldEventManager.prototype.showValidationMessage = function (message) {
    // do your stuff here
    alert("worky");

    // apply old method
    oldMethod.apply(this,arguments);
};

Of course, you could skip applying the old method if your new method does everything that the old method did.