Error message is not retained

[ianchouinard]

It is possible to enter an invalid cc number, leave the field and get no error message.

-When I enter an invalid CC number, an error message appears (Expected).
-When I jump to the exp date and the cvc, the number validation error disappears (Expected I guess, since I'm technically on a different input).
-When I leave the entire credit card field (blur event), the cc number is still invalid, but shows no error message and no onError event occurs (not expected). I would expect the field to tell the user there is an error with their input, or that the onError event triggers since the entry was invalid.

Steps to reproduce.

1. Enter "4" into the number field.
2. Press tab to go into the exp date field, enter a valid date.
3. Press tab to go into to cvc field. Enter a valid entry.
4. Leave the cc field by click out of it.
5. No errors are displayed until I click on the field again and click out of it. This misleads the user into thinking their entry was valid.

[ianchouinard]

If this is how this was intended to work, I would at least like to see some way of knowing when the credit card field as a whole is in a valid or invalid state, I could then display my own messaging, or prevent form submission in my app (this sounds like a pretty similar situation to issue #39 ).

I was hacking around at this and made a prop function so my parent component could be notified when any of the fields are invalid, or valid. ianchouinard@e86fe8b

^ Basically, what that commit does is trigger an event "onValidityStatusChange" when any part of the credit card fields are invalid, or if they are all valid after change. Please let me know if there is already a way to do something like that.

[jxom]

Hey @ianchouinard - we have just recently published a new library, React Payment Inputs which is a rewrite of react-credit-card-input, and fixes a lot of issues that were raised in this repository as well as a few extra enhancements.

Your issue that you raised here should be fixed in React Payment Inputs - however, if you wish to still use react-credit-card-inputs, I'll try find time to fix this issue in the future.

[ianchouinard]

@jxom that’s good news, thanks