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

我遇到了验证某些动态内容的问题。最近我找到类似的问题是这样的： jquery-validate-is-not-working-with-dynamic-content 如何使用jQuery验证插件验证动态内容

我的表单是一个基本的形式，输入名称，电子邮件，电话等，但有这个问题“有多少乘客？” 这是一个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，它不验证，所以我不知道是什么我做错了。

注 - 对于可读性

来源

2014-09-11 Akira Dawson

看看http://jsfiddle.net/arunpjohny/2fu7t2f3/1/ – 2014-09-11 03:54:29

@ArunPJohny谢谢你那。有没有办法使规则动态？我不想为FullName_0，FullName_1，FullName_2，FullName_3等添加一条规则 – 2014-09-11 04:00:14

@ArunPJohny，我看到错误消息已被看到，但是你在哪里调用jQuery中的错误消息？我没有看到无论是在DOM： – 2014-09-11 04:02:51

您可以使用要添加的属性规则类似

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

演示：Fiddle

来源

2014-09-11 04:11:46

这就是我所做的。我不得不这样做是为了实现创建的元素的验证：需要{ ：规则：{ 真实姓名：{ 要求：真实 }， FullName_0：{ 要求：真实 }， FullName_1真根据您的小提琴 }} ，这里http://jsfiddle.net/arunpjohny/2fu7t2f3/1/ – 2014-09-11 04:16:42

如果看到小提琴的答案，它添加'required'属性 – 2014-09-11 04:18:10

可以对不起但是我不理解。 – 2014-09-11 04:21:31

您需要使用

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

这允许您验证的内容添加到网页随时简化代码。

来源

2014-09-11 03:54:27

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

回答

相关问题