react-verification-input
react-verification-input copied to clipboard
andreaswilli
feat: custom-character-validated [release: minor]
Add a custom class, if and only if the input has a valid value, based on what has been predefined as a rule.
Thanks for the PR.
Can you please explain what problem is solved by your proposed feature? This helps me make sure it's a good fit for this project.
Yeap!
I used the package for a two factor authentication. But, thinking about validation: think it starts inactive, with gray border. When focused[characterSelected], we can customize easily, consider a purple border [active].
When it loses focus and we move on to the next one, we need to understand if what was typed faithfully corresponds to what was transmitted in validChars. In the case of 2F, only numbers.
Assuming it is populated and valid, it will assume the [characterValidated] class and be easily customized, with a border, for example, green.
Example: https://i.imgur.com/ERt1ZdF.png
I'm not sure I understand.
May I ask what value you are using for validChars? Because with a value of 0-9 or \d the letter M will be rejected, for example.
So it should not be possible to even enter an invalid character. Or do you have a reason to allow the user to type such invalid characters?