重用jQuery從匿名函數驗證

Question

嘗試驗證可見字段時出現typeError undefined is not a function錯誤。

我定義了一個變量，該變量將全局範圍內的jquery驗證程序保留，但會執行。 從由symfony/twig/JqueryValidationBundle動態生成的匿名函數閉包中驗證（）。

我這樣做是因爲我想將生成的代碼用於包含在單獨的js文件中的自定義函數。

可以做到這一點嗎？還是有另一種重用生成的代碼的方式？

這是生成的函數：

<script> 
var form, groups; 
(function($) { 
    form = $("form[name=\"scs_intakebundle_intake\"]"); 
    groups = {"Default": false,"firstPanel": false}; 
    form.find("*[name=\"scs_intakebundle_intake\x5Bsubmit\x5D\"]").click(function() { 
     groups = {"Default": true,"firstPanel": true}; 
    }); 

    form.validate({ 
     rules: { 
      "scs_intakebundle_intake\x5BfirstName\x5D": { 
       "required": {depends: function() {return groups["firstPanel"]; }} 
      }, 
      "scs_intakebundle_intake\x5BlastName\x5D": { 
       "required": {depends: function() {return groups["firstPanel"]; }} 
      } 
     }}); 
})(jQuery); 
</script> 

這是intake.js

function nextPanel() { 
    var result = true; 
    $('input:visible').each(function(i,item){ 
     //form is the global var that .validate() was already run. 
     //below is where form.element is undefined. 
     result = form.element(item) && result; 
     //the next line did not work either, but I though I'd share 
     result = item.valid() && result; 
    }); 
    if (result) { 
     $('.first').slideUp(); 
     $('.second').slideDown();   
    } 
} 

此功能是HTML表單：

<form name="scs_intakebundle_intake" method="post" action="/v2/web/app_dev.php/" novalidate="novalidate"> 
    <input type="hidden" id="scs_intakebundle_intake__token" name="scs_intakebundle_intake[_token]" value="956WbsNijk_3F_8X_0IGolrcdZaZzar93OwVHAxspyo"> 

    <div class="first"> 
     <div class="row"> 
      <div class="medium-7 columns"> 
       <input type="text" id="scs_intakebundle_intake_firstName" name="scs_intakebundle_intake[firstName]" required="required" maxlength="255" aria-required="true"> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="medium-7 columns"> 
       <input type="text" id="scs_intakebundle_intake_lastName" name="scs_intakebundle_intake[lastName]" required="required" maxlength="255" aria-required="true"> 
      </div> 
     </div> 
     <div> 
      <button type="button" id="scs_intakebundle_intake_next1" name="scs_intakebundle_intake[next1]" style="margin:0;" class="next1 panelButton" onclick="nextPanel();">Find my plan</button> 
     </div> 
    </div> 

    <div class="second"> 
     <div class="row"> 
      <div class="medium-7 columns"> 
       <div id="scs_intakebundle_intake_married"> 
        <input type="radio" id="scs_intakebundle_intake_married_0" name="scs_intakebundle_intake[married]" value="0"> 
        <label for="scs_intakebundle_intake_married_0">No</label><input type="radio" id="scs_intakebundle_intake_married_1" name="scs_intakebundle_intake[married]" value="1"> 
        <label for="scs_intakebundle_intake_married_1">Yes</label></div> 
      </div> 
     </div> 
     <div class="row" style="padding: 1.1rem"> 
      <button type="button" id="scs_intakebundle_intake_prev1" name="scs_intakebundle_intake[prev1]" style="float:left" class="prev1 panelButton" onclick="previousPanel();">Previous</button> 
      <button type="submit" id="scs_intakebundle_intake_submit" name="scs_intakebundle_intake[submit]" class="panelButton">Find my plan</button> 
     </div> 
    </div> 
</form> 

我沒有驗證鉻devtools控制檯，那$('input:visible')確實包含我想檢查的表單元素。 form.validate()確實會返回一個$ .validator對象。

驗證在單擊最終提交按鈕時不起作用，但當我嘗試觸發自定義函數的驗證時不起作用。

任何想法？

Answer 1

重要：如果表單尚未在DOM存在，當你調用.validate()那麼你可以不叫.validate()，直到它。您也不能在同一表單上多次撥打.validate()。

Answer 2

嗯，我發現了實際的問題，並有2個回答這篇文章。

1. 我忘了提及div.second通過css隱藏。匿名功能塊嘗試查找提交按鈕以添加單擊事件的代碼。該按鈕在當時隱藏。所以，功能不完整，驗證無法運行。當我刪除與隱藏部分相關的代碼時，一切都很好。

2. 作爲一個新手，我沒有意識到我可以通過重新運行驗證代碼來訪問驗證器對象。因此，加入var validator = $('form").validate();讓我可以訪問該帖子原始問題的對象。即使如此，它也沒有像上面解釋的那樣，關於隱藏的元素。

謝謝大家的幫助。