webdevpuneet.com

Related Snippets

221 in Forms category
1–6 of 60

Cascading Select

Fuse.js Typo-Tolerant Product Search with Threshold Tuning

Bootstrap Paste-to-Upload (Clipboard Image Paste)

Bootstrap Multi-File Upload Queue

Avatar Upload

Chip Filter

Address Validation Form — Free Real-Time Shipping Address UI

Address Validation Form · Forms · Plain HTML, CSS & JS · Live preview

CategoryForms
TagsForms & ValidationCSS Grid

Copy & paste

Source Code

<form class="avf-card" id="avfForm" novalidate>
  <h3>Shipping address</h3>

  <div class="avf-field">
    <label for="avfStreet">Street address</label>
    <input type="text" id="avfStreet" name="street" placeholder="123 Market Street" value="123 Mrket Street" required>
    <span class="avf-msg" id="avfStreetMsg"></span>
  </div>

  <div class="avf-row">
    <div class="avf-field">
      <label for="avfCity">City</label>
      <input type="text" id="avfCity" name="city" placeholder="San Francisco" value="San Francisco" required>
      <span class="avf-msg" id="avfCityMsg"></span>
    </div>
    <div class="avf-field avf-field-sm">
      <label for="avfState">State</label>
      <input type="text" id="avfState" name="state" placeholder="CA" maxlength="2" value="CA" required>
      <span class="avf-msg" id="avfStateMsg"></span>
    </div>
  </div>

  <div class="avf-field avf-field-sm">
    <label for="avfZip">ZIP code</label>
    <input type="text" id="avfZip" name="zip" placeholder="94103" value="94103" required>
    <span class="avf-msg" id="avfZipMsg"></span>
  </div>

  <div class="avf-suggestion" id="avfSuggestion" hidden>
    <div class="avf-suggestion-icon">!</div>
    <div class="avf-suggestion-body">
      <p class="avf-suggestion-title">We couldn't verify this address</p>
      <p class="avf-suggestion-text">Did you mean:</p>
      <button type="button" class="avf-suggestion-pick" id="avfSuggestionPick">123 Market Street, San Francisco, CA 94103</button>
      <button type="button" class="avf-suggestion-dismiss" id="avfSuggestionDismiss">Use address as entered</button>
    </div>
  </div>

  <button type="submit" class="avf-submit">Save address</button>
</form>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Single state function
setFieldState() is the one place a field's border, class, and message ever change together.
Input + blur validation
Immediate feedback while typing, plus a catch for fields left empty on blur.
Real format regexes
ZIP and state fields are checked against honest, simple format patterns.
Distinct suggestion state
A visually separate amber "did you mean" card, not conflated with red field errors.
Two suggestion exits
Accept the suggested address or proceed as entered — never a dead end.
One-click autofill
Picking the suggestion repopulates and revalidates every field at once.
Save confirmation state
A brief success state on the submit button confirms the save.
Format-only ZIP/state checks
Honestly validates shape, not real-world existence — a documented, intentional boundary.

About this UI Snippet

Address Validation Form — Real-Time Checks Plus a Verification Suggestion

Screenshot of the Address Validation Form snippet rendered live

Bad shipping addresses are one of the most expensive UX failures in e-commerce — a typo that isn't caught until a package bounces costs real money. This snippet builds the two-layer defense real checkout forms use: real-time per-field validation as the user types, plus a simulated "we couldn't verify this address, did you mean" suggestion card mimicking what a real address-verification API (Smarty, Lob, Google's Address Validation API) would return. It complements inline validation form and address autocomplete in a full checkout flow.

One function, three consistent states

setFieldState(key, state, message) is the single place that touches a field's visual state — it clears any previous valid/invalid class, applies the new one, and sets the message text together, in one call. This guarantees a field's border color and its message text can never contradict each other, a common bug when validation styling and message text are updated by separate code paths.

Validating on both input and blur

Each field validates on every keystroke (input) and again on blur — validating on input gives immediate feedback as the user types (particularly useful for catching a malformed ZIP before they move on), while validating on blur catches the case where a field is left empty after the user tabs away without typing anything.

Format checks with real regular expressions

The ZIP field is checked against /^\d{5}(-\d{4})?$/, accepting both 5-digit and ZIP+4 formats, and the state field against /^[A-Za-z]{2}$/ for a 2-letter code. These are deliberately simple, honest regex checks — they verify *format*, not that the ZIP or state code actually exists, which is exactly the distinction a real form should make clear to the user (format-valid isn't the same as address-verified).

The suggestion card is a distinct failure mode

Even a form where every field individually validates can still fail address *verification* — the format-valid but unverifiable case is what the "did you mean" suggestion card handles. It's deliberately visually distinct (an amber warning tone) from the red invalid-field state, because a suggested correction is a different kind of problem than a missing or malformed field: the form doesn't know the address is wrong, only that it can't confirm it's right.

Two ways out of the suggestion

The card offers both "use the suggested address" (which repopulates and revalidates every field) and "use address as entered" (which respects the user's insistence and proceeds anyway) — a real verification flow should never trap the user behind a suggestion they don't want to accept. Wire looksUnverifiable() to a real geocoding/address-verification API call, and replace the hardcoded suggested address with whatever the API actually returns.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA shipping address form renders pre-filled with a deliberate street typo ("Mrket").
  2. 2
    Edit a fieldEach field validates on every keystroke and on blur, showing a green check or a red error inline.
  3. 3
    Submit the formSince every field is format-valid but the street has a typo pattern, a "did you mean" suggestion card appears.
  4. 4
    Accept or dismiss the suggestionPick the suggested address to auto-fill and revalidate every field, or dismiss to proceed as entered.
  5. 5
    Watch the save confirmationThe submit button briefly confirms "Address saved" before reverting.
  6. 6
    Connect a real APIReplace looksUnverifiable() with a call to an address-verification service, using its actual suggested address.

Real-world uses

Common Use Cases

E-commerce checkout addresses
Catch shipping typos before a package bounces, with per-field checks and an amber did-you-mean suggestion card inside a checkout form.
Saved address settings
Validate addresses in an account area, with one setFieldState() function controlling every field's border, class and message.
Fulfilment staff tools
Give internal staff the same verification as customers, using honest regular expressions for ZIP and state format.
Signup billing addresses
Validate a billing address during onboarding, combining input and blur checks as in an inline validation form.
Logistics and autocomplete pairing
Reduce bounced packages on shipping platforms, using this as the manual fallback beside an address autocomplete.

Got questions?

Frequently Asked Questions

setFieldState(key, state, message) is the single function that ever touches a field's valid/invalid class and its message text — it clears any previous state class before applying the new one and setting the message, in one call. Because no other code path modifies these independently, a field's border color and its message can never contradict each other.

Validating on input gives immediate feedback as the user types, which is especially useful for a field like ZIP where a malformed pattern should be caught before the user moves on. Validating again on blur catches the separate case of a required field being left empty entirely — a user who tabs through a field without typing anything never fires an input event, so blur is needed to catch that.

The red invalid state means a field fails a structural check the form can verify itself (empty, wrong ZIP format, not a 2-letter state code). The amber suggestion card represents a different kind of uncertainty: every field is structurally valid, but the form (or a real address-verification API) still can't confirm the address actually exists as entered. Keeping these visually distinct avoids implying a suggested correction is the same severity as a missing field.

Replace looksUnverifiable() with an async call to a service like Smarty, Lob, or Google's Address Validation API, sent on submit once all fields pass local format validation. Use whatever corrected/standardized address the API returns as the suggestion card's content instead of the hardcoded "123 Market Street" fallback, and handle the API's own confidence levels (verified, partially verified, unverifiable) as distinct UI states if needed.

Hold each field's value and validation state (valid/invalid/none plus message) in component state, updating it in onChange and onBlur handlers that mirror validateField()'s logic. Represent the suggestion card's visibility and its suggested-address content as state too, so picking the suggestion becomes a single state update that repopulates and revalidates every field's state object at once.