通過顯示/隱藏功能顯示多個DIV的表單驗證

我的頁面中有多個DIV使用顯示/隱藏功能逐個顯示。兩個DIV包含需要驗證的表單。通過顯示/隱藏功能顯示多個DIV的表單驗證

在這些DIV中，我甚至無法使用HTML 5驗證，因爲當我單擊提交按鈕時，該特定的DIV隱藏和下一個DIV顯示。

所以基本上，在下一個DIV出現之前，第一個DIV必須顯示所需的驗證。

請找我的代碼提到如下： -

HTML DIV 1表格1

<div id="step3Content" role="Step3LocationInformation" class="marginLeft nodisplay"> 


<form> 
    <h1>Location Information</h1> 
     <table width="80%" id="locInfo"> 
      <colgroup> 
       <col width="20%" /> 
       <col /> 
      </colgroup> 
      <tr> 
       <th>Street #1</th> 
       <td> 
        <input type="text" name="lname" id="sadd1" required="required" /><span class="required">*</span></td> 
      </tr> 
      <tr> 
       <th>Street #2</th> 
       <td> 
        <input type="text" name="lname" id="sadd2" /></td> 
      </tr> 
      <tr> 
       <th>City</th> 
       <td> 
        <input type="text" name="city" id="city" required="required" /><span class="required">*</span></td> 
      </tr> 
      <tr> 
       <th>State/Province</th> 
       <td> 
        <input type="text" name="state" id="state" required="required" /><span class="required">*</span></td> 
      </tr> 
      <tr> 
       <th>Postal Code</th> 
       <td> 
        <input type="text" name="pcode" id="pcode" required="required" /><span class="required">*</span></td> 
      </tr> 
      <tr> 
       <th>Country</th> 
       <td> 
        <select required=""> 
         <option>Select Country</option> 
         <option>Canada</option> 
         <option>United States</option> 
        </select> 
        <span class="required">*</span> 
       </td> 
      </tr> 
      <tr> 
       <th>Phone</th> 
       <td> 
        <input type="text" name="phoneno" id="phoneno" value="+" /><span class="required">*</span></td> 
      </tr> 

     </table> 

    <div role="button" class="marginTop50 marginBottom"> 
     <input type="button" id="step3Back" value="Back" class="active" /> 
     <input type="submit" id="step3confirmNext" value="Next" class="active marginLeft50" /> 
    </div> 
</form>

HTML DIV 2表格2（這還需要驗證）

<div id="step4Content" role="Step4" class="marginLeft nodisplay"> 


<form> 
    <h1>URL Configuration</h1> 
    <div> 
     <p>Please provide the URL in the field below:-</p> 
     <p><input type="url" name="urlconf" id="urlconf" value="http://" required="required" /><span class="required">*</span></p> 

    </div> 
    <div role="button" class="marginTop50 marginBottom"> 
     <input type="button" id="step4Back" value="Back" class="active" /> 
     <input type="button" id="step4confirmNext" value="Next" class="active marginLeft50" /> 
    </div> 
</form>

JQUERY我已經習慣了顯示/隱藏的DIV：

  $("#step3confirmNext").click(function() { 
       $("#step3Content").addClass("nodisplay"); 
       $("#step4Content").removeClass("nodisplay"); 
     }); 

     $("#step4Back").click(function() { 
      $("#step3Content").removeClass("nodisplay"); 
      $("#step4Content").addClass("nodisplay"); 
     }); 

     //Function for moving from Step 4 to Step 5 and back, on click of "Next" and Back Button 
     $("#step4confirmNext").click(function() { 
      $("#step4Content").addClass("nodisplay"); 
      $("#step5Content").removeClass("nodisplay"); 
     }); 

     $("#step5Back").click(function() { 
      $("#step4Content").removeClass("nodisplay"); 
      $("#step5Content").addClass("nodisplay"); 
     });

你們可以請指導我如何爲這個代碼添加驗證。

讓我知道如果你需要一些更多的信息。謝謝

來源

2013-08-28 UID

添加一個id爲每個表單，那麼每個顯示/隱藏顯示器內部調用$（形式）.submit相應。 – ronnyfm

如果您在提交表單之一後發生驗證，可以將提交綁定到「step3confirmNext」按鈕。

引用您想要的表單，並執行$（form）.submit（）;

如果您在提交後沒有驗證，您可以在jquery中編寫自己的驗證，或發送ajax請求並返回驗證參數。

關於谷歌找到一個jquery validator，如果你想嘗試

來源

2013-08-28 21:14:48 haz0rd

通過顯示/隱藏功能顯示多個DIV的表單驗證

回答

相關問題