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?

Steerpike · Accepted Answer · 2009-08-27 15:18:24Z

4

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>

edited Aug 27, 2009 at 15:18

answered Aug 27, 2009 at 14:40

Steerpike

17.6k8 gold badges41 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

lucas Over a year ago

Steerpike is correct, further, you could simplify a bit by tagging your inputs with class="required email" etc. instead of adding them as rules above. Once you call validate on the form, the plugin will pick these up.

Steve · Accepted Answer · 2009-08-27 14:29:49Z

0

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.

answered Aug 27, 2009 at 14:29

Steve

5,8934 gold badges38 silver badges49 bronze badges

2 Comments

Victor Rodrigues Over a year ago

should I Call Validate() on the click?

jammus Over a year ago

.validate() is used to set up the form validation and .valid() is used to test if the form is valid. So no, .validate() is best called at initialization.

Collectives™ on Stack Overflow

jQuery Validation - Using validation on click, not on submit

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related