Interactive card details form

One specific challenge I faced during this project involved the expiry month (MM) input field. Instead of using a <select> dropdown for users to choose a month, I opted for a text <input> field to allow direct input. However, this introduced the following problem:

• Challenge:
  I wanted to restrict the user from entering values greater than 12 in the MM field. While it was straightforward to validate the input after submission or update the value dynamically, I couldn't prevent the user from typing invalid values (e.g., 13, 25) directly into the field in real-time.

• Impact:
  This limitation negatively affects the user experience (UX) since users might input incorrect values and only receive feedback after submission or when focusing out of the field. Ideally, the input should restrict invalid values as they are being typed.

• Request for Help:
  If you have suggestions or know a better way to implement real-time validation for numeric input fields without relying on <select> elements, I’d appreciate your input! The goal is to maintain a seamless UX while ensuring valid inputs.