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验证动态生成的表单

1 个答案: