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

You may have missed some code out but it looks like you're calling the function 'valid' but you've set it as 'validate'. So your function for validating emails and ticket ID's isn't running at all.

Answer 2

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>