Submitted about 2 years ago
Interactive Card Details Form (CSS/Typescript w/ Full Form Validation)
@aaron-romanick
Design comparison
SolutionDesign
Solution retrospective
What I thought would be a quick challenge turned out to be a lot more work than I had anticipated. I really wanted to get the form validation done well, but I underestimated how many edge cases I'd have to look out for. The credit card number field was especially hard to get working 100%, but I'm happy with where I got it.
I added a few extras:
- The credit card field will only allow number input but will automatically generate spaces
- The fields will automatically tab over once the field has reached the maximum input length
- Form won't allow submission until all fields are valid
- When you click on the Confirm / Continue button, that part of the page will fade out/in
Any feedback/comments is always appreciated!
Community feedback
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord