1) initially i have a row if the user click save & next button it will say you have 3 fields missing

2) if the user click the addmore button and he did not type any value in the text field then he click the save and next button it should still say 3 fields missing

3) if the user type any one of the field in the cloned row then he click the save and next button validation should happen with my code first two points are working

but the problem is if the user click some more rows and he type in any one of the cloned field then if he click safe and next button the required_Field class was applying in all other field but it should apply only to that row :(

If we can able to find the closest element of the field where the user type then i can able to add required_Field class to those element only

https://jsfiddle.net/karthic2914/b0euvnme/3/ Fiddle for reference

A simple solution without the use of data or filters. On field enter add a class to it (e.g. closestMark) and on leave remove it (you could do it with focus and unfocus as well). Than in any element you can get the .closest (https://api.jquery.com/closest/) element that has that class.

Member Avatar


I would change this approach. You could fill one record, only to use that same "add new" button several times. I'd use the blur event to re-evaluate / validate data. Just have the one ADDNEW button. The new record should be added between the previous record and the addnew button. You may need to use the .on() method to attach the event handler as you will be creating "future elements".