Clone validation using jquery partially working

Question

1. Initially when the user click next button it will show the message as You have missed 7 fields. Please fill before submitted.
2. If the user clicked the add more button it will get clone without fill any of the mandatory field if user click next button. The message still shows You have missed 7 fields. Please fill before submitted
3. Once the user starts fills any of the field in the cloned one and he missed the rest of the mandatory fields from clone and original div then the user click the next button it will show these many number of fields are missed.

function check_for_validation_removal(element) {
    var parent_div = $(element).closest("div.cloned-row1,div.cloned-row2,div.cloned-row3,div.cloned-row4,div.cloned-row5").find("input[type='text'],#txt_schName option:selected");
    console.log(parent_div);
    console.log(parent_div.length);
    var invalid_ele = 0;
    parent_div.each(function() {
        if ($(this).val().trim().length == 0) {
            invalid_ele = invalid_ele + 1;
        } 
    });
    console.log(invalid_ele);
    if (parent_div.length == invalid_ele) {
        parent_div.each(function() {
            $(this).removeClass("required_field");
            $(this).rules('remove');
        });

        bind_validation();
        update_errors();
    }
}

I tried adding selector in on change still no luck.

$('.cloned_field').on('input','.cloned_div',function(e){
    if($(this).val().trim().length > 0)
    {

        $(this).addClass("required_field");
        var parent_div = $(this).closest("div.cloned-row1").find("input");
        parent_div.each(function () {
            $(this).addClass("required_field");
        });
    }
    check_for_validation_removal($(this));
    bind_validation(); 
});

Please help me where I am doing wrong.

Thanks in advance

Here is the fiddle Link

Answer 1

What I think the question is, the add-on fields should only be validated when a field within the add-on section has a value. so I have updated the bind_validation() and added a new function addRemoveCloneValidation() and removed allot which is not in relation to the question (though you still might need it).

    function bind_validation(){
        $(".required_field ").each(function(){
            $(this).rules("add", { 
                required:true,
            });
        });
        addRemoveCloneValidation();
    }

    function addRemoveCloneValidation(){
    $('div[id^="added"]').each(function(index, item){
       var needsValidation = false;
        $.each($(item).find('.required_field'), function(index, item){                      
            if($(item).val()) 
                needsValidation = true; 
            $(item).change(addRemoveCloneValidation);
        });
        $.each($(item).find('.required_field'), function(index, item){ 
            $(item).rules("add", { 
                required:needsValidation,
            });
            if(!needsValidation)
               $(item).removeClass('errRed'); 
        });
    });   
}

when a new row is added, bind_validation is called which then calls addRemoveCloneValidation. this then adds or removes the validation for all the clone inputs based on if any of inputs has a value.

Fiddle

EDIT

Following your last comment

2) when the user click addmore button and user click next button for the validation it should say You have missed 6 fields. Please fill before submitted because the user has not fill any of the mandatory field from the clone div

then you also need to remove 'Degree Date' from being mandatory, or don't set the 'Degree Date' when you clone.

$clone.find("input.deg_date")
  .removeClass('hasDatepicker')
  .removeData('datepicker')
  .unbind()
  .datepicker({
   dateFormat: "mm-dd-yy",
   changeMonth: true,
   yearRange: "-100:+0",
   changeYear: true,
   maxDate: new Date(),
   showButtonPanel: false,
});//.val(fulldate);       <--remove

Fiddle

EDIT 2

To manually call the validation on the form, you can use $(".educationForm").valid();.

I have added it to this Fiddle on line 141.

The less validation only works on the 'test' section. but can easily to used to be added to the school section.