Card details form

Great job, you did awesome work. It looks good on smaller screen sizes as well.

In regard to the placeholder text in the textbox, could the color of the text be darker for accessibility/reading purposes?

Hi Shane, I like your solution. It looks good on both desktop and mobile. I like the use of type="number" for the month and year, but feel type="text" would be more appropriate for the CVC, as I doubt a user would increment up to a 3 digit number.

The form validation could use a little work, for example I can place spaces in the card number input, allowing me to enter a string with less than 16 digits which is of course the incorrect format, this can be fixed in the JS by stopping the user from entering a space character, or altering the card number maxlength, or using an error message to say that it should be digits only and not spaces.

It is also possible to submit the card details when the information is an incorrect format. For example, alphabetical characters can be included in the cardnumber and the submit button will still work. To fix this in your solution, I would expand your validate() function to include regex for each form input, and test the values against this. This could be extended to include an error message too, if the user tries to click the submit button without the correct information you could show that some details are incorrect, or instead grey out the button showing that it is disabled. Greying out the button could be performed with an event listener for hovering over the button calling the validate function, before the user clicks it.

The CVC can also be accepted as a 1 or 2 digit number which is incorrect, though this is an easy fix requiring the user to enter 3 or 4 digits which can be done with regex or with an if statement focusing on the length.

Numbers can also be entered as part of the cardholder name, but this is not a big problem. Another small problem is that the user can enter an expired credit card, as the year can be a value for a year which has already passed, for example 21.

Regardless of these issues, the solution's design is great. Good luck with your next challenge.