Question

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

我的表格是基本表格，输入姓名，电子邮件，电话等。但是这个问题是“有多少乘客？” 这是select，根据您选择的乘客数量，我使用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
        });

输出是input字段，询问额外的乘客姓名和select询问他们的食物要求

如何验证这些新创建的元素？这就是我到目前为止所做的：

$(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但它没有验证，所以我不知道我做错了什么。

note - 简化的可读性代码

Answer 1

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

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

演示：Fiddle

Answer 2

您需要使用

$(document).on('click', '#FORMOB7DC24203803DC2', function(e) {
    validate();
});

这使您可以随时验证添加到页面的内容。

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

2 个答案: