Listening on Apache Tapestry form events

I'm a Back-end dev, and recently inherited a couple of legacy Apache Tapestry systems. My skills with Tapestry are null my knowledge on javascript medium.

I want to disable a submit button right before the submit is made to avoid multiple submits. A very simple

$(document).ready(function () {
    $("#form").submit(function () {
        $("#submitbutton").attr("disabled", true);
        return true;
    });
});

approach wont do because the submit event is propagated before Tapestry does the client-side validation, so I could be disabling the button on a submint attempt that will fail validation.

On this question I learned that Tapestry also propagetes its own events, and if I could listen on tapestry:formprocesssubmit That would probably solve my problem.

I have my CreateContract.tml file with the form, fields and buttons that already work, I have my CreateContract.java file with

@Import(library = {
            "context:js/jquery.mask.min.js",
            "context:js/maintain-contracts.js",
            "context:js/zone-overlay.js"},
            stylesheet = "context:layout/zone-overlay.css")

And my maintain-contracts.js file with

$(document).ready(function () {
    $("#form").on('tapestry:formprepareforsubmit', function () {
        console.log("I want to arrive here!");
    });
});

But it doesn't work. On this mailing list thread I see people discussing very similar matters, but they go about listening on events on a different fashion, that I don't quite grasp.

Should I create the listener inside the initializer?

I'm reffering to the event as 'tapestry:formprepareforsubmit' instead of Tapestry.FORM_PREPARE_FOR_SUBMIT_EVENT because on both my maintain-contracts.js and my console the Tapestry variable is empty - why is that?

What about the .on versus .bind versus .observe trichotomy?

the first links's question was solved using ProptypeJS Class.create, but I think i dont have access to that.

I'm I going about that wrong?

Thank you, any help is appreciated.

After reading Tapestry's source code, i found out that the event is not called tapestry:formprepareforsubmit, but t5:form:prepare-for-submit, even though I found no documentation of that anywhere.

So

$(document).ready(function () {
    $("#form").on('t5:form:prepare-for-submit', function () {
        console.log("I want to arrive here!");
    });
});

Works perfectly.