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

【问题标题】：How to validate dynamic content using jQuery Validate plugin如何使用 jQuery Validate 插件验证动态内容
【发布时间】：2014-09-11 03:45:09
【问题描述】：

我在验证某些动态内容时遇到问题。我最接近发现类似问题的是： 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，但它没有验证，所以我不知道我做错了什么。

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

【问题讨论】：

看看jsfiddle.net/arunpjohny/2fu7t2f3/1
@ArunPJohny 谢谢你。有没有办法使规则动态化？我不想为 FullName_0、FullName_1、FullName_2、FullName_3 等添加规则
@ArunPJohny，我看到了错误消息，但是你在哪里调用 jQuery 中的错误消息？我在 dom 中都没有看到：
@syd 对不起，你的意思是什么......这些消息是由验证器框架创建的
@ArunPJohny 我确实使用了这个 errorPlacement: function(error, element) { //error.appendTo('.display_Error'); //$('.display_Error').html(" "); $('.display_Error').html(错误); }，但似乎无法使其正常工作。此外，表单不会随您建议的更改一起提交。这是为什么呢？

标签： javascript jquery forms jquery-validate

【解决方案1】：

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

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

演示：Fiddle

【讨论】：

这就是我所做的。我必须这样做才能实现对创建的元素的验证：规则：{ FullName：{ required：true }，FullName_0：{ required：true }，FullName_1：{ required：true } }，基于您在此处的小提琴@ 987654322@
如果您在答案中看到小提琴，您可以通过添加 required 属性来实现
对不起，我不明白。
见this fiddle.. 它是在没有添加诸如FullName_0、FullName_1 等规则的情况下完成的......那是你的问题不是......
你给我的小提琴没有规则，只有规则：{}

【解决方案2】：

你需要使用

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

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

【讨论】：