Build a Credit Card Form With Validation and Linked Input Fields

In a UI coding round, implement a credit card form in the browser. The form must validate what the user enters, and its input fields are linked to each other: what the user types into one field changes how other fields behave or are validated. Treat the following as the working specification, and confirm it with the interviewer before you code: - Fields: card number, name on card, expiry date (`MM/YY`), and security code (CVC). - The form detects the card network from the number as the user types and shows it. - Each field is validated, and a submit button sends the values only when everything is valid. ```hint Stored versus derived Decide which values are state the user typed and which should be derived from that state on every render. Keeping derived values in their own state is where linked fields drift out of sync. ``` ```hint The caret moves If you reformat the text as the user types, the text shifts under the cursor. Work out where the caret should end up after an edit in the middle of the field. ``` ### Constraints and Clarifications - Use plain JavaScript or a framework of your choice; no form or validation libraries. - No real payment call is needed: on a valid submit, pass the values to a callback. ### Clarifying Questions - Which card networks must be recognized, and what should happen for a number whose network is unknown? - When should errors appear: on every keystroke, when a field loses focus, or on submit? - Should the card number be displayed in groups as the user types? - Should focus move to the next field automatically when a field is complete? - Are there accessibility or autofill requirements, and which browsers must be supported? ### What a Strong Answer Covers - A component and state structure with a single source of truth for each field - Correct validation rules for each field, and where they run - Cross-field dependencies that update immediately when the field they depend on changes - Input formatting that keeps the caret in the right place, and handles pasting and deletion - Error display timing, focus handling, accessibility and browser autofill - Handling card data safely, and a test plan for the linked behavior ### Follow-up Questions - How would you handle a user pasting a full card number with spaces or dashes into the middle of an existing value? - How would you generalize this into a reusable form component driven by a validation schema? - What changes if, for compliance reasons, card data must never pass through your own JavaScript? - How would you test that changing the card number correctly re-validates the security code?