Validate a form on Click event with validator jQuery

Question

I am using jQuery validate for validate an input. My code:

 $('#button').click( function() {       
    $("#form").validate({              
        rules: {
            phone: {
                required: true,
                number: true,
                rangelength: [7, 14]
            }
        }
    }); 
});

And the HTML:

<form id="form" name="form" method="post" action="">
 <input id="phone" name="phone" class="required" type="text" />
 <div class="button" id="send_b">Send</div>
 </form>

This code is not working. If I add this line of jQuery

$("#form").submit();

inside the click event it works. But I don't want to submit the form so I want just to make the validation on click.

Does anyone know how to do this?

Give more detail on "not working." What isn't it doing that you expect it to? — BishopRook
– BishopRook, Commented Sep 16, 2011 at 13:31
IIRC validate() doesn't do the validation, it sets up the validation for the submit. Poke around the code to see if it can be short-circuited, or if there's a method you can call that actually does just the validation. — Dave Newton
– Dave Newton, Commented Sep 16, 2011 at 13:34

Jens Roland · Accepted Answer · 2011-09-16 13:31:55Z

14

Just add .form() to manually trigger the validation immediately (the default behavior waits for a submit event):

$('#button').click( function() {       
  $("#form").validate({              
    rules: {
      phone: {
        required: true,
        number: true,
        rangelength: [7, 14]
      }
    }
  }).form(); 
});

answered Sep 16, 2011 at 13:31

Jens Roland

27.8k15 gold badges86 silver badges105 bronze badges

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

Comments

Alex · Accepted Answer · 2011-09-16 13:33:45Z

0

Your code is binding a function to the click event of a button. What you're doing is saying "when this button is clicked, apply form validation to the form".

This is the incorrect way to use the validation plugin (I'm assuming you're using this validation plugin). Instead, you just execute the validation() method directly onto the form element; the plugin takes care of the submit event.

So, get rid of the click event binding.

answered Sep 16, 2011 at 13:33

Alex

9,5011 gold badge41 silver badges45 bronze badges

1 Comment

yardpenalty.com Over a year ago

I just came across an issue where I am validating a single input box and the value is a parameter to a link. But I think you are right it will validate onclick automatically.

mymotherland · Accepted Answer · 2011-09-16 13:34:07Z

0

Use form method form() method with your click event

answered Sep 16, 2011 at 13:34

mymotherland

8,24614 gold badges70 silver badges124 bronze badges

Collectives™ on Stack Overflow

Validate a form on Click event with validator jQuery

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related