0

I have a fully working validation in jquery that you can check here

http://jsfiddle.net/5WMff/1321/

Now I've decided to add a possibility of adding new 'rows' to my form that I also would like to validate in the same way as the original row. I already have a working code of adding dynamically fields (see here: http://jsfiddle.net/7yd5o63q/21 ) but I don't know how exactly could I plug in the validation there to the fields that are not yet created. Currently I'm appending another rows by this code:

$("#add_row").click(function(){
    $('#listOfCommercials').append('<div id="singleCommercial'+i+'"></div>');
    $('#singleCommercial'+i).html('<div class="form-group"> <label>Where do you want to go today?</label> <div class="col-lg-12"> <div class="col-lg-6"> <div class="checkbox"> <label> <input type="checkbox" value="" name="a'+i+'">a</label> </div> <div class="checkbox"> <label> <input type="checkbox" value="" name="b'+i+'">b</label> </div> <div class="checkbox"> <label> <input type="checkbox" value="" name="c'+i+'">c</label> </div>  </div> <div class="col-lg-6"> <div class="checkbox"> <label> <input type="checkbox" value="" name="d'+i+'">d</label> </div> <div class="checkbox"> <label> <input type="checkbox" value="" name="e'+i+'">e</label> </div> <div class="checkbox"> <label> <input type="checkbox" value="" name="f'+i+'">f</label> </div></div> </div> </div> <div class="form-group"> <label>When do you want to go?</label> <input type="text" class="form-control" id="datetimepicker'+i+'" name="appearanceDate'+i+'"/> </div> <div class="form-group"> <label>How long should your trip last?</label> <select class="form-control" name="duration'+i+'"> <option>5 days</option> <option>10 days</option> <option>15 days</option> <option>20 days</option> <option>30 days</option> </select> </div>');

   i++; 
   alert(i);
});

so I guess this part has to be modified, but I have no idea how to even start touching it, could you help me with that? Thanks!

Sparky
  • 98,165
  • 25
  • 199
  • 285
randomuser1
  • 2,733
  • 6
  • 32
  • 68

1 Answers1

1

You need to add the rule to validate the newly added input along with the DOM element. Try using something like:

$("#add_row").click(function(){
    $('#listOfCommercials').append('<div id="singleCommercial'+i+'"></div>');
    $('#singleCommercial'+i).html('<div class="form-group"> <label>Where do you want to go today?</label> <div class="col-lg-12"> <div class="col-lg-6"> <div class="checkbox"> <label> <input type="checkbox" value="" name="a'+i+'">a</label> </div> <div class="checkbox"> <label> <input type="checkbox" value="" name="b'+i+'">b</label> </div> <div class="checkbox"> <label> <input type="checkbox" value="" name="c'+i+'">c</label> </div>  </div> <div class="col-lg-6"> <div class="checkbox"> <label> <input type="checkbox" value="" name="d'+i+'">d</label> </div> <div class="checkbox"> <label> <input type="checkbox" value="" name="e'+i+'">e</label> </div> <div class="checkbox"> <label> <input type="checkbox" value="" name="f'+i+'">f</label> </div></div> </div> </div> <div class="form-group"> <label>When do you want to go?</label> <input type="text" class="form-control" id="datetimepicker'+i+'" name="appearanceDate'+i+'"/> </div> <div class="form-group"> <label>How long should your trip last?</label> <select class="form-control" name="duration'+i+'"> <option>5 days</option> <option>10 days</option> <option>15 days</option> <option>20 days</option> <option>30 days</option> </select> </div>');

    $('input[name="a'+i+'"]').rules("add", {  // <- apply rule to new field
        required: true
    });    

    i++;
    alert(i);
});

You'll still need to declare any rules for your static fields upon dom ready as follows...

$("#work_form").validate({
    errorElement: 'div',
        rules: {
            "number[]": "at_least_one",
            datetimepicker: {
                required: true,
                date: true
            },
            commercialText: {
                required: true,
                minlength: 5
            },
            terms: {
                required: true,
                maxlength: 2
            }
        },
});

Based on Sparky's answer here: jquery validate plugin on dynamic form inputs not working

Community
  • 1
  • 1
Andrei C
  • 768
  • 9
  • 21
  • thanks! one more thing - you wrote `$('input[name="a'+i+'"]').rules("add",` and my goal is to validave whether any of the 8 checkboxes is marked, not if everyone is marked... will that part be useful then? – randomuser1 Sep 21 '15 at 12:02
  • you should probably use `name="singleCommercial[]"` and add the new rule on the `singleCommercial` group – Andrei C Sep 21 '15 at 12:09
  • Your answer is correct. However in the future, if you find a question on this site similar enough to quote or reference another answer, it could probably be flagged as a duplicate. Thanks. – Sparky Sep 21 '15 at 13:03
  • Thanks @Sparky, i will read SO docs on flagging as duplicate. I failed to check what the flag button does, that's why they say "RTFM" – Andrei C Sep 21 '15 at 13:24