title: jQuery Validate using onclick handler not working?
body: <p>I want to use jQuery Validate to validate some form fields using a anchor onclick handler as follows but it doesn't seem to work?</p>
  
  <pre><code>&lt;input type="text" id="StartDate" name="StartDate"&gt;  
  &lt;input type="text" id="EndDate" name="EndDate"&gt; 
  
  &lt;a class="btn btn-primary js-add" href="#"&gt;Add&lt;/a&gt; 
  
  
  
  
   &lt;script&gt;
     $(document).on('click', '.js-add', function (e) {
         e.preventDefault();
  
         var validator = $("form").validate({
            rules: {
                StartDate: {
                   required: true
                },
                EndDate: {
                   required: true
                }
            },
            messages: {
                StartDate: "The Start Date is required",
                EndDate: "The End Date is required"
            }
  
         });
  
        if (!validator.valid()) {
            console.log("invalid");
            return;
        }
  
        //  otherwise do stuff but we dont want to submit form
     });
  
   &lt;/script&gt;
  </code></pre>
  
  <p>I want to validate the fields and if they are valid do some other stuff inside the handler but I dont want to submit the form as I have another button for submitting the form. The <code>validator.valid()</code> function in the above is always true. When I submit the main button i dont need to validate the above fields as they are not mandatory - this is just for some client side interactivity that i need to validate the above fields.</p>
  
  <p>is there any way I can achieve the above?</p>