Build and Validate Passport Form UI

Read the full interview experience this question came from →

Quick Overview

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.

Build and Validate Passport Form UI

Company: Stripe

Role: Software Engineer

Category: Software Engineering Fundamentals

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).

Overview: 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.

Read the full Stripe Software Engineer interview experience this question came from

|Home/Software Engineering Fundamentals/Stripe
Stripe logo
Stripe
Aug 13, 2025
mediumSoftware EngineerTechnical ScreenSoftware Engineering Fundamentals
7
0

Passport Pattern Validation UI and Logic

Context: Implement this in a vanilla HTML/CSS/JavaScript environment (single file, no frameworks). You are given a mapping from country names to passport number patterns, for example:

  • { USA: "LLDDDD", Canada: "AALLDDDD" }
  • Pattern symbols:
    • L: letter [A–Z/a–z]
    • D: digit [0–9]
    • A: alphanumeric [A–Z/a–z/0–9]

Tasks

  1. Build a minimal UI layout with:
    • A country selector populated from the object keys
    • A passport-number input field
    • 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)
    • 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).
Loading comments...