Catching an event prior to form submition

[Borut Bolčina]

Hi,

seems very basic, but I can't make it work. I want to do some custom form
validation before submit happens. What is wrong with my form observers?
Clicking on gameImage works just fine. None of the bellow versions of
questionnarie event observers work.

var MyValidator = Class.create({
    initialize: function() {
        $('gameImage').observe('click', this.hello.bind(this));

        Event.observe('questionnarie', 'submit', function() {
            Tapestry.debug("hello x");
        });

        //$('questionnarie').observe(Tapestry.FORM_VALIDATE_EVENT,
this.hello.bind(this));
        //$('questionnarie').observe('submit', this.hello.bind(this));
        //$('questionnarie').observe('submit',
this.hello.bindAsEventListener(this));
    },

    hello: function(event) {
        Tapestry.debug("hello");
    }
});


Template snippet:

            <p id="gameImage"><img src="${context:images/egypt3.jpg}" /></p>

            <t:form t:id="questionnarie" t:type="CustomForm"
t:autofocus="false">
                <t:label for="answerRadioGroup"/>
                <t:RadioGroup t:id="answerRadioGroup"
value="radioSelectedValue" t:validate="required" encoder="stringEncoder">
                    <t:loop source="answers" value="answer">
                        <p class="game_answer">
                            <t:Radio t:id="rad" value="answer.answer"
label="${answer.answer}"/><t:label for="rad"/>
                        </p>
                    </t:loop>
                </t:RadioGroup>
                <t:customerror for="answerRadioGroup"/>
                <div class="game_submit"><p><t:submit t:id="confirm"
value="_"/></p></div>
            </t:form>


Thanks for any input.