Build and Validate Passport Form UI
Company: Stripe
Role: Software Engineer
Category: Other / Miscellaneous
Difficulty: medium
Interview Round: Technical Screen
You are given an object mapping country names to passport number patterns, for example: { USA: "LLDDDD", Canada: "AALLDDDD" }, where L means a letter [A–Z/a–z], D means a digit [0–9], and A means an alphanumeric character [A–Z/a–z/0–9].
1) Build a minimal UI layout with: a country selector populated from the object keys, a passport-number input field, and a Validate button.
2) Implement validate(country, value) that returns true only if value exactly matches the selected country’s pattern; otherwise returns false. Specify how to handle edge cases (empty input, leading/trailing whitespace, unexpected country key, case handling, extra/invalid characters, and partial matches).
3) Wire the UI so that clicking Validate shows an inline error message when invalid and does nothing when valid; resetting occurs when the country changes (clear input and errors) and changing the input clears any existing error.
4) Provide console-based tests covering multiple valid/invalid scenarios across countries and edge cases.
5) Explain how you would improve accessibility (labels, ARIA attributes, focus management, error semantics, keyboard navigation, contrast) and what changes you would make to make it production-ready (validation robustness, i18n/l10n, performance, security/sanitization, telemetry, forms analytics, unit/integration/e2e tests).
Quick Answer: This question evaluates a candidate's practical front-end development skills, including DOM manipulation, client-side input validation and pattern matching, edge-case handling, accessibility awareness, and basic testing and telemetry considerations.