Validating a credit card
If you start out by entering an American Express number (ex.3782 822463 10005), and then delete the 3 in the beginning, the card is re-formatted correctly but the cursor skips to the end.Demo Toggling the Submit Button When the credit card or CVV is invalid, we should disable the submit button because we don’t want invalid form data to be sent to the server.
It seemed that whatever library I used would miss out on at least one of the 4 goals.The best way to keep track of different cards and their patterns is to store them in an object literal: The card verification value (CVV) is a set of 3–4 digit numbers on the back of your card and is used for security reasons.Most CVVs are 3 digits, with the exception of Maestro, which may not even require a CVV, and American Express, which has a CVV of 4 digits.In the end, I got fed up and decided to implement my own input mask.
Custom Input Masking I wanted my custom input mask to achieve all of the 4 goals while also retaining some quality of life features of input masking libraries, such as limiting the length.
Demo You can view implementations of the Luhn Algorithm in other languages such as Java, Swift, PHP, and Python here.