How to add jquery form validation in dynamic generated html?

Question

I have created a dynamic html block. When you click on add more button generate three field name, from-date, to-date and i apple the validation on this field but it's not working.

Dynamic post fields name :

<input type="text" name="data[User][title][]" />
<input type="text" name="data[User][fromdate][]" />
<input type="text" name="data[User][todate][]" />

Above fields are dynamic generated html and i want to give a validation every new generated field from Jquery Validation but it's not working.

Jquery Validation Rules :

 $(".UserForm").validate({
ignore: "", 
errorElement: 'label',
errorClass: 'error', 
highlight: function(element, errorClass, validClass) {
  $(element).parents("div.form-group").addClass("get-error");
},
unhighlight: function(element, errorClass, validClass) {
  $(element).parents("div.form-group").removeClass("get-error");
},

    rules: {
        "data[User][title][]": {
            required : true, 
        },
        "data[User][fromdate][]": {
            required : true
        },
         "data[User][todate][]": {
            required : true
        }
    },
    messages: {
        "data[User][title][]": {
            required: "Please enter title", 
        },
        "data[User][fromdate][]": {
            required: "Please select fromdate", 
        },
        "data[User][todate][]": {
            required: "Please select todate",
        }  
    }
});