Responsive Credit Card Form That Verifies User Data

Hi Frontend Community,

I really liked the practice of verifying the user's entries with regex statements and adding and removing classes on the images. I created a function for each field on the form to verify the data and I added an event listener to each one as well to display the error messages.

Originally I tried to use the browser error messages and modify them but I eventually gave up and removed the required tag from the html input element and just added my own hidden element to display the error message. It gave me more control over the appearance and position. Plus it was more inline with the Figma design.

It looks like a lot of code for what it does and I'm sure there is a more efficient way to run this. It works and it is organized but with time and practice, I'm sure I can get it to a tiddier package :) Any suggestions are welcome!