jQuery Validation not validating on button click

Question

I have the following JavaScript function:

$('div.nextStepBilling').click(function (e) {
    if ($(this).parent().parent().attr("id") == "newCardDiv") {
        $('form#myForm').validate({
            rules: {
                cardHolder: "required",
                cardNumber: {
                    required: true,
                    minlength: 15,
                    maxlength: 16
                },
                CVV: {
                    required: true,
                    minlength: 3,
                    maxlength: 4
                }
            },
            messages: {
                cardHolder: "Card holder name is required",
                cardNumber: {
                    required: "Credit card number is required",
                    minlength: "Credit card must be at least 15 digits long",
                    maxlength: "Credit card must be at most 16 digits long"
                },
                CVV: {
                    required: "CVV (security code) is required",
                    minlength: "CVV must be at least 3 digits long",
                    maxlength: "CVV must be at most 4 digits long"
                }
            }
        });
        if ($('form#myForm').valid()) {
            alert("valid");
        } else {
            alert("invalid");
        }
    }
});

When I click on the proper div.nextStepBillingit always alerts valid, even if there is nothing in those inputs.

I don't get any errors in the console and I can get jquery validate to work using $('form#myForm').validate().element("#cardHolder"); I have the latest jquery and jquery validate packages included (in proper order) on the page. Can anyone see anything wrong with the above code?

You should also show the relevant HTML markup so we can know more about this button. — Sparky
– Sparky, Commented Aug 14, 2013 at 16:00

Sparky · Accepted Answer · 2013-08-14 16:05:33Z

2

Your problem is here:

$('div.nextStepBilling').click(function (e) {
    if ($(this).parent().parent().attr("id") == "newCardDiv") {
        $('form#myForm').validate({
            // rules & options
            ...

Because .validate() is only the initialization method of the plugin, it is not the testing method. The .validate() method only gets called once on DOM ready to initialize the plugin with your rules & options. All subsequent calls are ignored.

You would use the .valid() method to programmatically trigger a validation test on demand.

Your code should look more like this...

$(document).ready(function() {

    $('form#myForm').validate({ // initialize the plugin
        // rules & options
    });

    $('div.nextStepBilling').click(function (e) {
        if ($(this).parent().parent().attr("id") == "newCardDiv") {
            $('form#myForm').valid(); // triggers a test on the form
            ...

Simple DEMOS: http://jsfiddle.net/zSq94/ and http://jsfiddle.net/zSq94/1/

edited Aug 14, 2013 at 16:05

answered Aug 14, 2013 at 15:58

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

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

3 Comments

hjavaher Over a year ago

Thanks for the help. I do however have the .valid(); in an if statement right underneath the initialization. The problem is that my form requires multiple validation rules so I need to initialize it only when that button is clicked as other buttons will have different validation rules.

Sparky Over a year ago

@hjavaher, it does not matter, your problem is still being caused by not initializing the plugin on DOM ready; and you cannot change rules by dynamically calling .validate() again... it's always ignored on all subsequent calls. There are other methods like rules('add') and rules('remove') that are used for changing rules after the initialization. If you want more help, please improve your question by including the markup and a jsFiddle demo.

hjavaher Over a year ago

ah, I didn't know that. I will try that and report back. Thanks

Collectives™ on Stack Overflow

jQuery Validation not validating on button click

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related