CODEWITHSUNDEEP
asp.netjavascriptjquery
Victor Rodrigues
Victor Rodrigues

Reputation: 11711

jQuery Validation - Using validation on click, not on submit

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?

Upvotes: 3

Views: 8884

Answers (2)

Steerpike
Steerpike

Reputation: 17544

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>

Upvotes: 4

Steve
Steve

Reputation: 5853

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.

Upvotes: 0

Related Questions