如何使用jQuery Validate插件验证动态内容 [英] How to validate dynamic content using jQuery Validate plugin

问题描述

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

I'm having issues validating some dynamic content. The closest I have come to finding a similar problem is this: jquery-validate-is-not-working-with-dynamic-content

我的表单是基本表单，输入姓名，电子邮件，电话等.但是这里有一个问题:有多少位乘客?" 这是一个select，根据您选择的乘客人数，我使用jQuery根据此数量使用以下内容创建更多字段:

My form is a basic form, enter name, email, phone etc. But there's this question "How many passengers?" This is a select and depending on how many passengers you select, I use jQuery to create more fields based on this amount using this:

$('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要求他们的饮食要求

The output is an input field asking for the additional passenger name and a select asking for their food requirements

如何验证这些新创建的元素?这是我到目前为止的内容:

How do I validate these newly created elements? This is what I have so far:

$(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等.

Is there a way to make this dynamic? Because this form allows for up to 30 passengers and I don't want to manually write in rules FullName_0, FullName_1, FullName_2 etc etc.

我添加了规则FullName_0，该规则未通过验证，因此我不知道自己在做什么错.

I added the rule FullName_0 and it doesn't validate so I don't know what I'm doing wrong.

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

note - simplified code for readability

推荐答案

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

You can use attributes to add the rules like

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

演示:小提琴

这篇关于如何使用jQuery Validate插件验证动态内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！