title: Validate two forms when one's submission depends on the other
body: <p>I'm working on this project and am getting stuck with form validation. I have two forms, Form X and Form Y and I wanna use the jQuery validation plugin to implement client-side validation. This is my first time using this plugin, so I apologize in advance if my questions seem rudimentary. 
  I've set up the forms so that the user has to fill in both Form X and Form Y to submit the data in both forms. Once that is done, Form X is submitted through Ajax and Form Y is submitted as a result of a success response. The submission process works fine and all the data is sent through perfectly. However, I cannot get validation to work. I've pored through the documentation and multiple forums but have not been able to find a working solution. Any suggestions or links to relevant literature would be greatly appreciated. Here's the relevant javascript and html:</p>
  
  <pre><code>&lt;script&gt;
  $("#formYsubmit").click(function(e){
          e.preventDefault();
      $.ajax({
          url: "the resulting page",  
      type: "POST",
          data: formXdata, 
          error: function(resp) {
              console.log(resp);
          },
          success: function(resp) {
              $("#formY").submit();
          }
      });
  
      $(this).disabled=true;
      $(this).val()="Sending..."
      return false;
  });
  
  $('#formX').validate({
      rules: {
          email: {
                  required: true,
                  email: true
                  },
          password: {
                  minlength: 6,
                  required: true
                  },
          full_name: {
                  required: true
                  },
          site_address: {
                  minlength: 5,
                  },
          phone: {
                  minlength: 10,
                  phoneRegex: true
                  }
      },
      messages: {
          email: "Please enter a valid email address",
          site_address: "Please enter your website name",
          full_name: "Please enter your name",
          password: {
              required: "Please provide a password",
              minlength: "Your password must be at least 6 characters long"
          },
          phone: "Please enter a valid phone number",         
          email: "Please enter a valid email address"
      },
      highlight: function(label) { 
          $(input).closest('.control-group').addClass('error');
      },
      success: function(label) {
          label.text('OK!').addClass('valid');
      }
  });
  $('#formY').validate({
      rules: {
          plan_input: {
                  required: true,
                  },
          fieldA: {
                  required: true
                  },
          fieldB: {
                  required: true
                  },
          fieldC: {
                  required: true
                  },
      },
      highlight: function(label) { 
          $(input).addClass('error');
      },
      success: function(label) {
          label.text('OK!').addClass('valid');
      }
  });
  &lt;/script&gt;
  
  
  &lt;form id="formX" style="float:left; width:40%;" method="post"&gt;
      &lt;div class="control-group"&gt;
          &lt;div class="controls"&gt;                          
              &lt;input id="full_name" name="full_name" placeholder="Full Name" type="text" /&gt;
          &lt;/div&gt;
          &lt;label class="error"&gt;&lt;/label&gt;
      &lt;/div&gt;    
      &lt;div class="control-group"&gt;
          &lt;div class="controls"&gt;
              &lt;input class="required" id="email" maxlength="75" name="email" placeholder="Email ID" type="text" /&gt;
          &lt;/div&gt;
      &lt;/div&gt; 
      &lt;div class="control-group"&gt;
          &lt;div class="controls"&gt;
              &lt;input class="required" id="password" name="password" placeholder="Password" type="password" /&gt;
          &lt;/div&gt;
          &lt;label class="error"&gt;&lt;/label&gt;
      &lt;/div&gt; 
      &lt;div class="control-group"&gt;
          &lt;div class="controls"&gt;
              &lt;input id="site_address" name="site_address" placeholder="Website" type="text" /&gt;
          &lt;/div&gt;
          &lt;label class="error"&gt;&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="control-group"&gt;
          &lt;div class="controls"&gt;
              &lt;input id="phone" maxlength="25" name="phone" placeholder="Phone" type="text" /&gt;
          &lt;/div&gt;
          &lt;label class="error"&gt;&lt;/label&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  &lt;div id="frontServerErrorContainer"&gt;&lt;/div&gt;
  &lt;form id="formY" style="float:left;width:40%;" method="post" action=""&gt;
      &lt;select name="plan_input" class="field" id="plan-select" disabled&gt;
          &lt;option value=""&gt;Choose Plan&lt;/option&gt;
          &lt;option value="1"&gt;Option A&lt;/option&gt;
          &lt;option value="2"&gt;Option B&lt;/option&gt;
          &lt;option value="3"&gt;Option C&lt;/option&gt;
      &lt;/select&gt;
      &lt;div id="serverErrorContainer2"&gt;&lt;/div&gt;
      &lt;div id="errorContainer2"&gt;&lt;ul id="errorContainer2"&gt;&lt;/ul&gt;&lt;/div&gt;
      &lt;div class="sh form-field cl-div control-group" &gt;
          &lt;input type='text' class="field" name='fieldA' value="" placeholder="fieldA" id="fieldA"&gt;
      &lt;/div&gt;
      &lt;div class="sh form-field cl-div control-group" &gt;
          &lt;input type='text' class="field" name='fieldB' value="" placeholder="fieldB" id="fieldB"&gt;
      &lt;/div&gt;
      &lt;div class="sh form-field cl-div control-group" &gt;
          &lt;input type='text' class="field" name='fieldC' value="" placeholder="fieldC" id="fieldC"&gt;
      &lt;/div&gt;
      &lt;button class="bootstrapbtn bootstrapbtn-primary" id="formYsubmit"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I apologize for the extremely long snippet of code or if this question is too elementary. Thank you!</p>