驗證兩個表單的提交取決於另一個

Question

我正在處理這個項目，並且被表單驗證卡住了。我有兩種形式，Form X和Form Y，我想用jQuery驗證插件來實現客戶端驗證。這是我第一次使用這個插件，所以如果我的問題看起來很簡單，我會提前道歉。 我已經設置了表格，以便用戶必須填寫表格X和表格Y以提交兩種表格中的數據。一旦完成，表單X通過Ajax提交，表單Y作爲成功響應的結果提交。提交過程正常，所有數據都完美髮送。但是，我無法驗證工作。我已經通過文檔和多個論壇，但一直沒有找到一個工作的解決方案。任何建議或相關文獻的鏈接將不勝感激。以下是相關的javascript和html：

<script> 
$("#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'); 
    } 
}); 
</script> 


<form id="formX" style="float:left; width:40%;" method="post"> 
    <div class="control-group"> 
     <div class="controls">       
      <input id="full_name" name="full_name" placeholder="Full Name" type="text" /> 
     </div> 
     <label class="error"></label> 
    </div>  
    <div class="control-group"> 
     <div class="controls"> 
      <input class="required" id="email" maxlength="75" name="email" placeholder="Email ID" type="text" /> 
     </div> 
    </div> 
    <div class="control-group"> 
     <div class="controls"> 
      <input class="required" id="password" name="password" placeholder="Password" type="password" /> 
     </div> 
     <label class="error"></label> 
    </div> 
    <div class="control-group"> 
     <div class="controls"> 
      <input id="site_address" name="site_address" placeholder="Website" type="text" /> 
     </div> 
     <label class="error"></label> 
    </div> 
    <div class="control-group"> 
     <div class="controls"> 
      <input id="phone" maxlength="25" name="phone" placeholder="Phone" type="text" /> 
     </div> 
     <label class="error"></label> 
    </div> 
</form> 
<div id="frontServerErrorContainer"></div> 
<form id="formY" style="float:left;width:40%;" method="post" action=""> 
    <select name="plan_input" class="field" id="plan-select" disabled> 
     <option value="">Choose Plan</option> 
     <option value="1">Option A</option> 
     <option value="2">Option B</option> 
     <option value="3">Option C</option> 
    </select> 
    <div id="serverErrorContainer2"></div> 
    <div id="errorContainer2"><ul id="errorContainer2"></ul></div> 
    <div class="sh form-field cl-div control-group" > 
     <input type='text' class="field" name='fieldA' value="" placeholder="fieldA" id="fieldA"> 
    </div> 
    <div class="sh form-field cl-div control-group" > 
     <input type='text' class="field" name='fieldB' value="" placeholder="fieldB" id="fieldB"> 
    </div> 
    <div class="sh form-field cl-div control-group" > 
     <input type='text' class="field" name='fieldC' value="" placeholder="fieldC" id="fieldC"> 
    </div> 
    <button class="bootstrapbtn bootstrapbtn-primary" id="formYsubmit">Submit</button> 
</form> 

對於極長的代碼片段或者如果這個問題太簡單，我表示歉意。謝謝！

Answer 1

您的ajax屬於submitHandler回調驗證插件。您還需要將所有內容都包含在DOM ready hander函數中，以確保在調用.validate()時HTML存在。您不應該需要.validate()以外的任何ajax，也不需要任何其他click處理程序。

<script> 

    $(document).ready(function() { 

     $('#formX').validate({ 
      // rules & options here 
     }); 

     $('#formY').validate({ 
      // rules & options here, 
      submitHandler: function(form) { 
       // only fires when form is valid 
       $("#formYsubmit").disabled=true; 
       $("#formYsubmit").val()="Sending..." 
       form.serialize(); 
       // your ajax here 
       return false; // prevent the regular form submit when using ajax 
      } 
     }); 

    }); 

</script> 

文檔：http://jqueryvalidation.org/validate/

submitHandler（默認：天然的形式提交）
類型：Function（）
回調 處理實際當表單是有效的提交。獲取表格 作爲唯一的參數。替換默認的提交。 經過驗證後，通過Ajax提交表單。