title: Jquery.validate - one Page - multiple forms, one submits ok, others dont
body: <p>On my page, i have 3 complete forms, each has it's own submit button, with different id for each form and button.</p>
  
  <pre><code>&lt;form action="" method="post" class="form-horizontal" id="formA"&gt;
     ...
     &lt;button id="formASend" type="submit" class="btn"&gt; Submit&lt;/button&gt;
  &lt;/form&gt;
  
  &lt;form action="" method="post" class="form-horizontal" id="formB"&gt;
     ...
     &lt;button id="formBSend" type="submit" class="btn"&gt; Submit&lt;/button&gt;
  &lt;/form&gt;
  
  &lt;form action="" method="post" class="form-horizontal" id="formC"&gt;
     ...
     &lt;button id="formCSend" type="submit" class="btn"&gt; Submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>In javascript i have following logic for each submit button:</p>
  
  <pre><code>$.validator.setDefaults({
          debug:true,
          errorElement: 'span', //default input error message container
          errorClass: 'help-inline', // default input error message class
          focusInvalid: false, // do not focus the last invalid input)
          highlight: function (element) { // hightlight error inputs
              $(element).closest('.control-group').addClass('error'); // set error class to the control group
          },
  
          unhighlight: function (element) { // revert the change dony by hightlight
              $(element)
                  .closest('.control-group').removeClass('error'); // set error class to the control group
          }
  
      });
  
  
  $(function() {
  
      var formA = $('#formA');
  
      // init validator obj and set the rules
      formA.validate({
          rules: {
               ...
          }
      });
  
      formA.submit(function () {
          return formA.valid();
      });
  
  
      var formB = $('#formB');
  
      // init validator obj and set the rules
      formB.validate({
          rules: {
              ...
          }
      });
  
      formB.submit(function () {
          return formB.valid();
      });
  
      var formC = $('#formC');
  
      // init validator obj and set the rules
      formC.validate({
          rules: {
              ...
          }
      });
  
      formC.submit(function () {
          return formC.valid();
      });
  });
  </code></pre>
  
  <p>Submit work ok for first form, and doesnt work for the other two. I've checked the html index with DOMLint, and no problems there. Click event gets triggered, form is valid, submit returns true, but doesnt submit.</p>
  
  <p>Validation work properly, validating only the form that was submitted. </p>
  
  <p>How to apply different rules to each form?</p>
  
  <p><strong>Possible solution</strong></p>
  
  <pre><code>$.validator.setDefaults({
              debug:true,
              errorElement: 'span', //default input error message container
              errorClass: 'help-inline', // default input error message class
              focusInvalid: false, // do not focus the last invalid input)
              highlight: function (element) { // hightlight error inputs
                  $(element).closest('.control-group').addClass('error'); // set error class to the control group
              },
  
              unhighlight: function (element) { // revert the change dony by hightlight
                  $(element)
                      .closest('.control-group').removeClass('error'); // set error class to the control group
              },
              submitHandler: function (form) {
  
                 if ($(form).valid()) {
                     form.submit();
                 }
              }
          });
  
  
      $(function() {
  
          var formA = $('#formA');
  
          // init validator obj and set the rules
          formA.validate({
              rules: {
                   ...
              }
          });
  
          var formB = $('#formB');
  
          // init validator obj and set the rules
          formB.validate({
              rules: {
                  ...
              }
          });
  
          var formC = $('#formC');
  
          // init validator obj and set the rules
          formC.validate({
              rules: {
                  ...
              }
          });
      });
  </code></pre>
  
  <p>Adding submit handler, return submit event back into action.</p>