title: validate two forms with one submit button with jquery validate plugin
body: <p>I have two forms on one page with a starting and closing <code>&lt;form&gt;&lt;/form&gt;</code> tag for each form. I m validating it with JQuery Validate Plugin. I have to validate both forms with one single button. The problem is that validation of both forms required a separate button for each form which is not required. the code is given below:-</p>
  
  <pre><code>$(document).ready(function(){
   $('.formValidate').each(function() {   // &lt;- selects every &lt;form&gt; on page
          $(this).validate({
  
      rules: {
           orderno: { //placed at first form
              required: true,
              minlength: 5
          },customername: { //placed at second form
              required: true,
              minlength: 5
          }
      },
      //For custom messages
      messages: {
  
          order:{
              required: "Enter a Order No",
              minlength: "Enter at least 5 characters"
          },customername:{
              required: "Enter a username",
              minlength: "Enter at least 5 characters"
          }
  
      },
      errorElement : 'div',
      errorPlacement: function(error, element) {
        var placement = $(element).data('error');
        if (placement) {
          $(placement).append(error)
        } else {
          error.insertAfter(element);
        }
      },
      submitHandler: function() { 
          console.log("Order submitted!"); 
      }
  
  
   });
   });
  
  
  }); //end readyfunction
  </code></pre>
  
  <p>HTML is as given below:-</p>
  
  <pre><code>&lt;form class="formValidate" id="tstordform" method="get" action=""&gt;
      &lt;div class="row"&gt;
           &lt;div class="input-field col s12"&gt;
               &lt;i class="mdi-image-tag-faces prefix"&gt;&lt;/i&gt;
               &lt;input  id="orderno" name="orderno" type="text" data-error=".errorTxt1"&gt;
               &lt;label for="orderno"&gt;Order No.*&lt;/label&gt;
               &lt;div class="errorTxt1"&gt;&lt;/div&gt;
            &lt;/div&gt;
       &lt;/div&gt;
  &lt;/form&gt;
  
  &lt;form class="formValidate" id="cstdataform" method="get" action=""&gt;
      &lt;div class="row"&gt;
          &lt;div class="input-field col s12"&gt;
              &lt;i class="mdi-action-account-circle prefix"&gt;&lt;/i&gt;
              &lt;input id="customername" name="customername" type="text" data-error=".errorTxt6"&gt;
              &lt;label for="customername"&gt;Customer Name&lt;/label&gt;
              &lt;div class="errorTxt6"&gt;&lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="input-field col s3"&gt;
              &lt;button id="validateboth" class="btn waves-effect waves-light center cyan submit" type="submit" name="action"&gt;Save Order
                  &lt;i class="mdi-content-send right"&gt;&lt;/i&gt;
              &lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Kindly help me!</p>