使用jQuery验证动态创建的内容验证插件

Question

我知道有几个人可能会问这个问题，但我很难找到一个解决方案来处理我的问题。我有这样的表单，人们可以根据需要添加尽可能多的行（每行有4个输入框），然后在不使用时删除它们。我使用.append（）jquery函数添加行并使其工作。

我很难搞清楚如何验证新的输入框。有没有人有一个很好的解决方案，我想要做什么？这里是一个链接到我的代码：

$(document).ready(function() { 

var count = 1; 
$('p#add_field').click(function() { 

    count += 1; 

    $('table#entries').append(
     '<tr>' + 
     '<td><input id="cl_' + count + '" name="cl[]' + '" type="text" /></td>' + 
     '<td><input id="num_' + count + '" name="num[]' + '" type="text" size="5"/></td>' + 
     '<td><input id="description_' + count + '" name="description[]' + '" type="text" size="86"/></td>' + 
     '<td><span class="delete">Remove</span></td></tr>'); 

    $(".delete").click(function() { 
     $(this).closest('tr').remove(); 
    }); 

}); 





    // 1. prepare the validation rules and messages. 
    var rules = { 

     email: { 
      required: true, 
      email: true 
     }, 
     lname: "required", 
     fname: "required", 
     city: "required", 
     address: "required", 
     'cl[]': "required", 
     'num[]': "required", 
     'description[]': "required", 
     age: { 
      required: true, 
      number: true, 
      maxlength: 3 
     }, 
     phone: { 
      required: true, 
      phoneUS: true 
     } 



    }; // end var rules 


    // 2. Initiate the validator 
    var validator 
     = new jQueryValidatorWrapper("FormToValidate", 
      rules); 

    // 3. Set the click event to do the validation 
    $("#btnValidate").click(function() { 
     if (!validator.validate()) 
      return; 

     alert("Validation Success!"); 
    }); 
}); 

http://jsfiddle.net/9k7ph/4/

Answer 1

1）要调用.validate()您click处理程序中，所以它不能正常表单上的初始化。您只能在DOM上准备一次来初始化表单上的插件。

2）您不需要将提交按钮放入点击处理程序中。 jQuery Validate插件已经正确捕获了click事件。

3）您的动态创建的字段必须具有唯一的name属性，否则插件将失败。

4）创建它们时，必须将规则动态添加到新创建的字段中。调用.validate()不是这样做的......初始化后新的规则/选项将被忽略。您可以使用内置方法（如rules('add')），或者更容易，将class="required"添加到新的输入字段，并自动选取此规则。

我放弃了你的小提琴，并从头开始......基本验证工作，现在你可以将其他插件重新插入它。

DEMO：http://jsfiddle.net/X5EvD/

$(document).ready(function() { 

    $("#FormToValidate").validate({ 
     rules: { 
      email: { 
       required: true, 
       email: true 
      }, 
      lname: "required", 
      fname: "required", 
      city: "required", 
      address: "required", 
       'cl[]': "required", 
       'num[]': "required", 
       'description[]': "required", 
      age: { 
       required: true, 
       number: true, 
       maxlength: 3 
      }, 
      phone: { 
       required: true, 
       phoneUS: true 
      } 
     }, 
     submitHandler: function (form) { 
      alert("Validation Success!"); 
      return false; // if you need to block normal submit because you used ajax 
     } 
    }); 

    var count = 1; 
    $('p#add_field').click(function() { 

     count += 1; 

     $('table#entries').append(
      '<tr>' + 
      '<td><input id="cl_' + count + '" name="cl[' + count + ']' + '" type="text" class="required"/></td>' + 
      '<td><input id="num_' + count + '" name="num[' + count + ']' + '" type="text" size="5" class="required"/></td>' + 
      '<td><input id="description_' + count + '" name="description[' + count + ']' + '" type="text" size="86" class="required"/></td>' + 
      '<td><span class="delete">Remove</span></td></tr>'); 


     $(".delete").click(function() { 
      $(this).closest('tr').remove(); 
     }); 

    }); 

});