將jQuery驗證插件與動態表單元素結合使用

Question

我有一個包含多個表單的頁面，每個表單可以包含任意數量的名稱中具有公共根的元素。我試圖使用this answer驗證提交時的表單，但我在jquery.validate.js上收到TypeError: a.data(...) is undefined錯誤。我的代碼如下。

var valForm = function(kit_id) { 
     $('input[name^="kit_desc_"]').each(function() { 
      $(this).rules("add", { 
       required: true, 
       messages: { 
        required: "Please enter a description" 
       } 
      }); 
     }); 

     $("#frm_" + kit_id).validate({ 
      errorElement: "div", 
      errorPlacement: function(error, element) { 
       $("#error_modal").html(error); 
      } 
     }); 

     if (! $("#frm_" + kit_id).valid()) { 
      // a dialog box will appear listing the errors. 
      $("#error_modal").dialog(); 
     } 
    }; 

單擊鏈接時會調用該函數。

<a href="javascript:;" onclick="valForm(1);" class="button136">Save</a>

有什麼建議？

Answer 1

我想你必須在窗體上調用.validate()，然後才能以該形式的輸入調用.rules()。您也應該僅以輸入的形式致電.rules()。

var valForm = function(kit_id) { 
    var form = $("#frm_" + kit_id); 
    form.validate({ 
     errorElement: "div", 
     errorPlacement: function(error, element) { 
      $("#error_modal").html(error); 
     } 
    }); 

    form.find('input[name^="kit_desc_"]').each(function() { 
     $(this).rules("add", { 
      required: true, 
      messages: { 
       required: "Please enter a description" 
      } 
     }); 
    }); 

    if (! form.valid()) { 
     // a dialog box will appear listing the errors. 
     $("#error_modal").dialog(); 
    } 
};