javascript - jQuery clone validation not working for HTML drop down

Question

Working on clone in jQuery. With my current code original div getting cloned validation working fine for the original one and cloned one. These things are working with my code.

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

Below things are not working:

1. With my current code if I have select drop down / radio button in the cloned div validation was not working

2. The validation count was wrong after the cloned

   function bind_change_events(){
   $('.cloned_field').on('input',function(e){ 
       if($(this).val().trim().length > 0)
       {
           //$(this).removeClass("cloned_field");
           $(this).addClass("required_field");
           var parent_div = $(this).closest("div.cloned-row1,div.cloned-row2,div.cloned-row3,div.cloned-row4,div.cloned-row5").find("input","select");
           parent_div.each(function () {
               $(this).addClass("required_field");
           });
       } 
       check_for_validation_removal($(this));
       bind_validation();
   });
   }
   

Here is the updated fiddle.

Answer 1

When you are cloning the elements, you do not clone the class .required_field. Which in your code only to that class, adds required: true part.

I Now figured out the problem definitely is in your cloning part.

if($(this).hasClass("required_field"))
{
   $(this).removeClass("required_field");
   $(this).addClass("cloned_field");
   //$(this).addClass("errRed");
}else{
   $(this).removeClass("errRed");
   $(this).removeClass("text-error-red");
}

You had if it has the class required_field, remove it. So i just deleted this line $(this).removeClass("required_field"); and when adding more education forms, it increased the unfilled count.

I just tested the same idea for the second cloning part. And that did the job. So this is the solution to the count.

Now your talking about the cloned div or radio button not working in your code, in the liveweave code, the drop downs works for me, tho I can't find any radio buttons.

Please try the answer I specified, and if any problems keep to exist, please update your question or leave a comment here.