I have been trying to implement a validation logic for duplicate name inputs. I have displayed some dynamic input fields for name input from an array and trying to add validations on it.
Expectations:
- when user type duplicates name on the fields there will be a validation errors shown beside the input fields.
- validation errors should be displayed with all the fields that contains the duplicate inputs(name)
- validations should occur on each input fields.
What I have tried so far:
I am adding the link here for the details of the implementations. I am checking the input fields on onChange handlers and display error based on that on each index of the field. What I am getting currently is that:
What I am trying to achieve is that: Errors should be shown on each fields if it contains the duplicate values. Not like just showing the errors initially and whenever we move from that fields the validation doesn't work ( which is currently, I am having and it's wrong).
Can anybody help with this? I am also not sure what would be the best way of implementing this types of validations based on the current implementations I have. Any helps would be highly appreciated. Thanks in Advance.
Here is the link for the implementations: https://codesandbox.io/s/pedantic-bird-r979m?file=/src/Input.jsx:0-1648
