javascript - 如何使用 jQuery Validate 插件验证动态内容

Question

我在验证某些动态内容时遇到问题。我最接近发现类似问题的是: jquery-validate-is-not-working-with-dynamic-content

我的表格是基本表格，输入姓名、电子邮件、电话等。但是有一个问题“有多少乘客？”这是一个选择，根据您选择的乘客数量，我使用 jQuery 根据此数量创建更多字段:

$('select.travellers').attr('name','Number of travelers').on('click', function() {
          var travellers = this.value; //On change, grab value
          var dom = "";
          for(var i = 0; i < travellers; i++){ //for 0 is less than travellers
              dom += '<label>Full Name</label>';
              dom += '<input type="text" name="FullName_'+i+'">';
              dom += '<label>Food&nbsp;requirements</label>';
              dom += '<select size= "0" name="Food Requiries_'+i+'"  tabindex="-1"  >
                      <option value="No pork">No pork</option>
                      <option value="Halal">Halal</option>
                      <option value="Food allergies">Food allergies</option>
                      <option value="Other">Other</option></select>';
          }
          $('.form_Additional').html(dom); //add dom into web page
        });

输出是一个输入字段，询问其他乘客姓名，以及一个选择询问他们的食物要求

如何验证这些新创建的元素？这是我到目前为止所拥有的:

$(document).ready(function(e) {

    //validation rule for select
    $.validator.addMethod("valueNotEquals", function(value, element, arg){
      return arg != value;
     }, "Value must not equal arg.");


    //validate form
    $("#FORMOB7DC24203803DC2").on("click", function(event){
        $(this).validate({
            rules: {
                FullName:{
                    required: true  
                },
                FullName_0:{
                    required: true  
                },
                'Number of travelers':{
                    valueNotEquals: "Please select" 
                }
            }
        });
    });
});

有没有办法让这种动态化？因为此表单最多允许 30 名乘客，并且我不想手动写入规则 FullName_0、FullName_1、FullName_2 等。

我添加了规则 FullName_0，但它没有验证，所以我不知道我做错了什么。

注意 - 简化代码以提高可读性

Answer 1

您可以使用属性来添加规则，例如

dom += '<input type="text" name="FullName_' + i + '" required>';

演示:Fiddle