jQuery Validation - Using validation on click, not on submit

Question

I'm using (or trying to) JQuery Validation with WebForms/html.

I have, basically (simplifying the real html, showing only the elements):

<input id="txtEmail"/>
<input id="txtTicketID"/>
<a id="create" href="#">Create a new ticket</a>
<a id="find" href="#">Find this ticket</a>

The javascript for validation/action is here:

$(function() {
    $("#aspnetForm").validate({
        rules: {
            txtEmail: {
                required: true,
                email: true
                ,
                messages: {
                    required: "* enter your e-mail",
                    email: "*  invalid e-mail"
                }
            },
            txtTicketID: {
                required: true,
                digits: true,
                messages: {
                    required: "*",
                    digits: "* invalid ticket"
                }
            }
        },
        onfocusout: true,
        onkeyup: true,
        onsubmit: false,
        debug: true
    });

    $("#create").click(function() {
        if ($("#aspnetForm").valid()) {
            var email = $("#txtEmail").val();
            if (email != "")
                window.location = "CreateTicket.aspx?email=" + email;
        }
    });

    $("#find").click(function() {
        if ($("#aspnetForm").valid()) {
            var email = $("#txtEmail").val();
            var ticketID = $("#txtTicketID").val();
            if (email != "" && ticketID != "")
                window.location = "DetailEditTicket.aspx?email=" + email + "&ticketID=" + ticketID;
        }
    });
});

It is not working at all.. the valid() on the links click always return true, even if the fields are blank, or wrong.

When I type something, blur, etc, nothing makes validation happen.

Do you see what is missing on this?

Answer 1

the validate(rules:{}) takes options consisting of a name:{object} pattern, you're passing in an id:{object} pattern. Try:

<input id="txtEmail" name="txtEmail"/>
<input id="txtTicketID" name="txtTicketID"/>
<a id="create" href="#">Create a new ticket</a>
<a id="find" href="#">Find this ticket</a>