PracHub
QuestionsPremiumCoachesLearningGuidesInterview Prep
|Home/Other / Miscellaneous/Stripe

Build and Validate Passport Form UI

Last updated: Mar 29, 2026

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.

  • medium
  • Stripe
  • Other / Miscellaneous
  • Software Engineer

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.

Related Interview Questions

  • Build searchable list and highlight max transaction - Stripe (medium)
  • Debug wrong DOM attributes in unknown framework - Stripe (medium)
Stripe logo
Stripe
Aug 13, 2025, 12:00 AM
Software Engineer
Technical Screen
Other / Miscellaneous
0
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).

Solution

Show

Submit Your Answer to Earn 20XP

Sign in to leave a comment

Loading comments...

Browse More Questions

More Other / Miscellaneous•More Stripe•More Software Engineer•Stripe Software Engineer•Stripe Other / Miscellaneous•Software Engineer Other / Miscellaneous
PracHub

Master your tech interviews with 8,000+ real questions from top companies.

Product

  • Questions
  • Learning Tracks
  • Interview Guides
  • Resources
  • Premium
  • For Universities
  • Student Access

Browse

  • By Company
  • By Role
  • By Category
  • Topic Hubs
  • SQL Questions
  • Compare Platforms
  • Discord Community

Support

  • support@prachub.com
  • (916) 541-4762

Legal

  • Privacy Policy
  • Terms of Service
  • About Us

© 2026 PracHub. All rights reserved.