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?

Answer 1

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

Answer 2

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 3

Use form method form() method with your click event