0

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

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
        });

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" 
                }
            }
        });
    });
});

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.

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

Community
  • 1
  • 1
Akira Dawson
  • 1,247
  • 4
  • 21
  • 45

2 Answers2

1

You can use attributes to add the rules like

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

Demo: Fiddle

Arun P Johny
  • 384,651
  • 66
  • 527
  • 531
  • That is what I've done. I've had to do this to achieve the validation of the created elements: rules: { FullName: { required: true }, FullName_0: { required: true }, FullName_1: { required: true } }, Based on your fiddle here http://jsfiddle.net/arunpjohny/2fu7t2f3/1/ – Akira Dawson Sep 11 '14 at 04:16
  • if you see the fiddle in the answer, you can it with adding the `required` attribute – Arun P Johny Sep 11 '14 at 04:18
  • I'm sorry but I do not understand. – Akira Dawson Sep 11 '14 at 04:21
  • see [this fiddle](http://jsfiddle.net/arunpjohny/2fu7t2f3/5/).. it is done without adding rules like `FullName_0`, `FullName_1` etc... that was your question wasn't it... – Arun P Johny Sep 11 '14 at 04:22
  • the fiddle you gave me has no rules, it's just rules:{} – Akira Dawson Sep 11 '14 at 04:23
  • but it is working the way you wants it, right? the rules are added as attributes to the element... – Arun P Johny Sep 11 '14 at 04:24
  • Ahh I see what you mean. That does work but I have specific errors I need to check e.g email, date. and I want the errors to be more specific e.g passenger 1 needs to have name filled out, passenger 2 needs to have name filled out etc – Akira Dawson Sep 11 '14 at 04:27
  • you want to change the error messages? you can add all rules as attributes – Arun P Johny Sep 11 '14 at 04:29
  • Yes I can, I have found a way around. Thanks heaps for your help. Really got me out of a pickle – Akira Dawson Sep 11 '14 at 04:30
  • @AkiraDawson another way to handle it is http://jsfiddle.net/arunpjohny/2fu7t2f3/6/ – Arun P Johny Sep 11 '14 at 04:41
  • That works really well. I had issues doing it for the food requirements dropdown. I added this after the names: $els.find('input[name^="Food_Requiries_"]').each(function () { $(this).rules("add", { valueNotEquals: "Please select" , messages: { valueNotEquals: "Please select a food requirement" } }); }); But had no such luck. – Akira Dawson Sep 11 '14 at 04:56
0

You need to use 

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

This allows you to validate content added to page at any time.

Cherkasov Kirill
  • 98
  • 8