Interactive Card Details Form

Hi... Hope this helps (thumbs up if it does). Easiest way to handle error checks is to make use of the onsubmit event attached to the form.

Also, your name field, try using a fixed length for name, or truncate it when you are about to display.Using a long name broke your card UI, and alerts as error display is a bad UX.

The keypress event might work, but it is not the best way to go about it.

Also use the proper semantics for your forms. There is a button element, no need to convert an input tag to a button.

Using the onSubmit event with an error check library like formik, goes a long way to make your work easier, and checks simpler.