2013-10-26 33 views
2

我有一個窗體與不同的字段集。在每一步我驗證整個表單的規則,只有窗體上的可見元素應該驗證。我可以看到,在第一步驗證工作正常。但在第2步中只有一些字段被驗證。這裏是形式jquery驗證不適用於所有領域

<form id="enquiryForm" action=""> 
      <div id="fieldset1" style="display: block;"> 
       <fieldset class="addingenq"> 
        <legend> 
         <h2>Contact information</h2> 
         <span class="steps">Step 1 of 3</span> 
        </legend> 
        <p> 
         <input type="text" id="firstname" name="first" value="" placeholder="First Name" required> 
        </p> 
        <p> 
         <input type="text" id="lastname" name="last" value="" placeholder="Last Name" required> 
        </p> 
        <p> 
         <input id="step1" type="button" value="Next" onclick="javascript: completeStep1();"/> 
        </p> 
       </fieldset> 
      </div> 
      <div id="fieldset2" style="display: none;"> 
       <fieldset class="addingenq"> 
        <legend> 
         <h2>Move information</h2> 
         <span class="steps">Step 2 of 3</span> 
        </legend> 
        <p> 
         <input type="text" id="originCity" placeholder="Origin City" required> 
        </p> 
        <p> 
         <input type="text" id="originCountry" placeholder="Origin Country" value="India" required> 
        </p> 
        <p> 
         <input type="number" id="originZip" placeholder="Origin Zip(Optional)"> 
        </p> 
        <p> 
         <input type="text" id="destinationCity" placeholder="Destination City" required> 
        </p> 
        <p> 
         <input type="text" id="destinationCountry" value="India" placeholder="Destination Country" required> 
        </p> 
        <p> 
         <input type="number" id="destinationZip" placeholder="Destination Zip(Optional)"> 
        </p> 
        <p> 
         Moving Date 
         <input type="date" id="movingDate" name="movingDate" required> 
        </p> 
        <p> 
         <input id="back_step1" type="button" value="Back" onclick="javascript: moveStep(2, 1);"/> 
         <input id="step2" type="button" value="Next" onclick="javascript: completeStep2();"/> 
        </p> 
       </fieldset> 
      </div> 
      <div id="fieldset3" style="display: none;"> 
       <fieldset class="addingenq"> 
        <legend> 
         <h2>Moving Requirements</h2> 
         <span class="steps">Step 3 of 3</span> 
        </legend> 
        <span class="form-subhead">Item List</span> 
        <p> 
         Packaging Material Rating 
         <input id="pmr" name="start" type="number" value="1" /> 
        </p> 
        <p> 
         <input id="back_step2" type="button" value="Back" onclick="javascript: moveStep(3, 2);"/> 
         <input id="step3" type="button" value="Submit" onclick="javascript: completeStep3();"/> 
        </p> 
       </fieldset> 
      </div> 
     </form> 

這裏的定義驗證規則,我使用

$("#enquiryForm").validate({ 
     ignore : ":not(:visible)", 
     rules : { 
      originZip : { 
       required : false, 
       digits : true 
      }, 
      destinationZip : { 
       required : false, 
       digits : true 
      } 
     } 
    }); 

現在的問題是,在步驟2中我看到的唯一產地城市存在驗證,沒有別的。 「originCity」字段後沒有元素得到驗證。甚至沒有要求標籤的字段。我錯過了什麼。有人可以幫忙嗎?

回答

6

您錯過了驗證插件工作所需的輸入元素的name屬性。來自docs

name屬性對於輸入元素是「必需的」,驗證插件在沒有它的情況下不起作用。通常name和id屬性應該具有相同的值。

這裏有一個工作的jsfiddle:http://jsfiddle.net/tP4tj/

+1

我會補充說了'name'還必須_unique_因爲這個屬性是插件如何跟蹤輸入。 – Sparky

+0

謝謝了。這工作。 –