title: Jquery validate submitHandler is not getting called
body: <p>I have a form with two buttons</p>
  
  <p>a) Test  - on click of the button a javascript function is called to verify a couple of credentials.
   
   </p>
  
  <p>b) Create - on click of the button a javascript function is called to save the form.
   @Messages("playauthenticate.project.create") </p>
  
  <p>I have a form tag around these two submit buttons with no action.</p>
  
  <p>name, description, accessKey and secretKey are the four fields in the form.</p>
  
  <p>on clicking on the create button, I want to perform jquery validation and then submit the form but the jquery validation submitHandler is not getting called in the javascript function and there are no errors in the Error Console.</p>
  
  <p>When I click on the create button, the create alert is shown and then the form resets and I am able to see all the parameters entered in the URL.</p>
  
  <pre><code>$("create").click(function() {
  
          alert("create ");
  
          $('#projectForm').validate( { 
                  rules: {
                      name: {
                          minlength: 6,
                          required: true
                      },
                      description: {
                          required: true,
                          description: true
                      },
                      accessKey: {
                          minlength: 10,
                          required: true
                      },
                      secretKey: {
                          minlength: 15,
                          required: true
                      }
                    },
                    focusCleanup: false,
  
                  wrapper: 'div',
                  errorElement: 'span',
  
                  highlight: function(element) {
                      $(element).parents ('.control-group').removeClass ('success').addClass('error');
                  },
                  success: function(element) {
                      $(element).parents ('.control-group').removeClass ('error').addClass('success');
                      $(element).parents ('.controls:not(:has(.clean))').find ('div:last').before ('&lt;div class="clean"&gt;&lt;/div&gt;');
                  },
                  errorPlacement: function(error, element) {
                      error.appendTo(element.parents ('.controls'));
                  },
                     submitHandler: function() {
  
                         alert("hello");
  
                         var name = $('#name').val();
                         var description = $('#description').val();
                         var accessKey = $('#accessKey').val();
                         var secretKey = $('#secretKey').val();
  
                          var dataString = 'name='+ name + '&amp;description=' + description + '&amp;accessKey=' + accessKey+ '&amp;secretKey=' + secretKey;
                          //alert(dataString);
  
                          $.ajax({
                            type: "POST",
                            url: "/demo/save",
                            data: dataString,
                            success: function(data) {
                              $('#result').html("&lt;h2&gt;demo created successfully!&lt;/h2&gt;");
                             },
                              error: function(data) {
                                  $("#result").html("&lt;h2&gt;Error!&lt;/h2&gt;");
                              }
                          }) 
  
                      }
          });
       });
  </code></pre>
  
  <p>JSfiddle - <a href="http://jsfiddle.net/NJxh5/3/" rel="noreferrer">http://jsfiddle.net/NJxh5/3/</a>
  Thank you</p>