使用 jQuery Validator 验证动态生成的表单

Question

抱歉一直问这个问题，但我就是想不通。我已将问题减少到最低限度。

如何验证动态生成的表单？下面是我的尝试，但正如所见，它显示为通过验证。

<form id="myForm">
    <input type="text" name="email" id="email" value="bademail" >
</form>
<button id="validate">validate</button>

var myValidateObj = {
     rules: {
         email: {
             email: true
         }
     }
 };

 $(function () {

     jQuery.validator.setDefaults({
         debug: true,
         success: "valid"
     });

     $('#validate').click(function () {

         //Validate the traditional form
         var validate1 = $('#myForm').validate(myValidateObj);
         console.log('Option 1', $('#myForm'), $('#email'), $('#email').val(), validate1.element('#email'), $('#email').valid(), $('#myForm').valid());

         //Validate dynamically created form
         var input = $('<input />', {
             type: 'text',
             name: 'email',
             value: 'bademail'
         });
         //input.prop('value', 'bademail');
         var form = $('<form />').append(input);
         var validate = form.validate(myValidateObj);
         console.log('Option 2', form, input, $('#email').val(), validate.element(input), input.valid(), form.valid());
     });

 });

Answer 1

按钮需要位于 form 内并且是 type="submit" 以便插件捕获点击。
不要将 .validate() 放在 click 处理程序中（参见第 1 项）。它仅用于在表单上初始化插件。异常，下面我们在 click 处理程序中创建新表单，然后立即在新表单上调用 .validate()。

通过这两个小改动，静态表单的验证工作正常：jsfiddle.net/j2pgobze/3/

为了清楚起见，我重写了您的 DOM 操作代码。我简单地复制了表单的 HTML 并给它一个新的 ID：http://jsfiddle.net/zem84tfp/

$(function () {

     // INITIALIZE plugin on the traditional form
     var validate1 = $('#myForm').validate(myValidateObj);

     $('#newform').one('click', function () {

         // code here to create new form; give it new ID
         // do not duplicate ID on anything else

         // INITIALIZE plugin on the new form
         var validate = $('#myForm2').validate(myValidateObj);
     });

});

使用 jQuery Validator 验证动态生成的表单

Validate dynamically generated form with jQuery Validator

javascript

jquery

jquery-validate