Customs Declaration · Native Form Validation
The browser's own constraint validation — required, type=email, min/max and a pattern — with native error bubbles no locator can click.
The browser vets the form before you do. Its error bubbles are not yours to click.
Native Form Validation is an easy Forms & Inputs challenge on Fun UI Playground. The browser's own constraint validation — required, type=email, min/max and a pattern — with native error bubbles no locator can click. It runs entirely in the browser, with no backend. Every interactive element carries a stable id and data-testid prefixed with “native-validation-”, and the techniques it exercises are constraint validation API, read validationMessage, required / pattern fields, assert blocked submit.
At a glance
- Category
- Forms & Inputs
- Difficulty
- easy
- Teaches
- constraint validation API · read validationMessage · required / pattern fields · assert blocked submit
- Backend
- None — runs entirely in the browser
- Locators
- Stable
idanddata-testid, prefixednative-validation-
Selectors on this page
| Locator | What it is |
|---|---|
#native-validation-form #native-validation-email #native-validation-quantity #native-validation-code | Form: #native-validation-form · fields #native-validation-email (type=email), #native-validation-quantity (number, min=1 max=10), #native-validation-code (pattern [A-Z]{3}-\d{4}) |
#native-validation-submit | Submit: #native-validation-submit — the browser blocks it while any field is invalid; no flash appears |
#native-validation-summary [data-testid="native-validation-error"] | Native bubbles cannot be clicked; each field's validationMessage is mirrored into #native-validation-summary (items [data-testid="native-validation-error"]) |
[data-testid="flash"] | A fully valid form submits and shows the site-wide flash [data-testid="flash"] with .flash-success |
Frequently asked questions
How do I assert that browser validation blocked a form submit?
Assert the absence of the success signal plus the mirrored message. #native-validation-submit is blocked while any field is invalid, so no flash appears, and every field's validationMessage is mirrored into #native-validation-summary as [data-testid="native-validation-error"] items.
Can I click a native validation bubble?
No — the browser's error bubble is not part of the DOM and no locator can reach it. That is why the page mirrors each validationMessage into #native-validation-summary; read it there, or query the constraint validation API directly.
More Forms & Inputs
- Central Perk Staff Login · Login Form
- Starter Lab Team Picker · Checkboxes & Radios
- The Sorting Ceremony · Dropdowns
- Barista Keypad · Inputs & Key Presses
- The Dundies · JavaScript Alerts
- Screenplay Submissions · File Upload
- The Apothecary Index · Autocomplete Combobox
- Time Circuits · Date Picker
- All Forms & Inputs challenges
Updated
Fun UI Playground — all challenges, bug hunts, getting started, glossary, about.