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: {         


        

Answer 1

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.

Answer 2

Use form method form() method with your click event

Answer 3

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(); 
});