webdevpuneet.com

Related Snippets

221 in Forms category
1–6 of 60

Quill Rich Text Editor with Custom Toolbar and Character Limit

CodeMirror JSON Editor with Validation Gutter

CodeMirror Code Editor with Line Numbers, Folding and Themes

Marked + DOMPurify Live Markdown Preview

FilePond Image Upload with Preview and Reorder

Cropper.js Aspect-Ratio Presets for Social Posts

Inline Validation Form — Real-Time Field Validation

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

CategoryForms
TagsForms & Validation

Copy & paste

Source Code

<form class="iv-card" id="ivForm" novalidate>
  <h3>Create account</h3>
  <label class="iv-field" data-name="name">
    <span>Full name</span>
    <input type="text" name="name" autocomplete="name" required minlength="2">
    <em class="iv-msg"></em>
  </label>
  <label class="iv-field" data-name="email">
    <span>Email</span>
    <input type="email" name="email" autocomplete="email" required>
    <em class="iv-msg"></em>
  </label>
  <label class="iv-field" data-name="password">
    <span>Password</span>
    <input type="password" name="password" required minlength="8" data-rule="strong">
    <em class="iv-msg"></em>
  </label>
  <button class="iv-submit" type="submit">Create account</button>
  <p class="iv-done" id="ivDone" hidden>Account created.</p>
</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

Validate on blur, then live
No nagging while typing the first time; instant once touched.
Per-field rule functions
Each field maps to a validator returning a message or empty.
Success tick + message
Green border, inline SVG check, and a confirmation note.
Specific error messages
Layered checks surface the most relevant problem first.
Submit gating
Force-validates all fields and blocks invalid submission.
Focus first error
Sends keyboard users straight to what needs fixing.
Semantic inputs
novalidate over native types for autofill and assistive tech.
No library
Pure HTML/CSS/JS — no validation dependency.

About this UI Snippet

Inline Validation Form — Real-Time Per-Field Validation with Success and Error States

Screenshot of the Inline Validation Form snippet rendered live

Inline validation gives users immediate, per-field feedback as they fill a form — a green tick when a field is right, a clear message when it's wrong — instead of a wall of errors after they hit submit. This snippet builds an accessible, well-timed inline-validation form in plain HTML, CSS, and vanilla JavaScript, with the subtle UX details that make the difference between helpful and annoying.

Validate at the right moment

The art of inline validation is timing. Validating on every keystroke from the start nags users while they're still typing their email; waiting until submit is too late. This form validates a field on blur the first time (marking it "touched"), then re-validates on input thereafter — so you get instant correction once you've engaged a field, but no premature red while you're mid-thought. Empty, untouched fields stay neutral.

Pluggable rules

Each field maps to a validator function that returns an empty string for valid or a message for invalid. The email rule uses a pragmatic regex, the password rule layers checks (length, then an uppercase letter and a number) and returns the most relevant message first. Because rules are just functions keyed by field name, adding a field or changing a rule is a one-line edit with no DOM wiring.

Clear success and error states

Valid fields get a green border and an inline SVG check icon baked into the input background, plus a "Looks good" note; invalid fields get a red border and a specific message. The states are driven by two classes so they're easy to theme, and the check is a data-URI SVG so there are no extra image requests.

Accessible and submit-safe

The form uses novalidate to take over validation while keeping semantic inputs (type="email", required, minlength) for assistive tech and autofill. On submit it force-validates every field, focuses the first invalid one, and only proceeds when all pass — so keyboard and screen-reader users are taken straight to what needs fixing. Messages sit in <em> elements tied to each field for a clear reading order.

Drop-in and framework-ready

The whole thing is one small script with a validators map and a render function, no dependencies. Swap the rules for your own, point submit at your API, and you have production-grade inline validation — a clean reference for the pattern behind every good sign-up and checkout form.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA sign-up form renders with name, email, and password fields.
  2. 2
    Fill a field and blurValidation kicks in on blur, then live as you correct it.
  3. 3
    See the statesValid fields show a green tick; invalid ones show a specific message.
  4. 4
    SubmitAll fields are force-validated; focus jumps to the first problem.
  5. 5
    Edit the rulesChange the validators map to add fields or adjust requirements.
  6. 6
    Wire your APIReplace the success branch with your real submit call.

Real-world uses

Common Use Cases

Sign-up and registration
Validate name, email and password as users complete them, within an auth login card style flow.
Checkout forms
Catch errors field by field in a checkout form, validating on blur first and live afterwards so typing is never nagged.
Contact and lead forms
Confirm a valid email before submit in a contact form, showing a green tick with an inline SVG check.
Settings and profile edits
Validate edits inline in a settings panel, with layered checks surfacing the most relevant problem first.
Multi-step flow gating
Gate each step of a multi-step form on valid fields, using per-field rule functions that return a message or an empty string.
Related: One-Time vs Monthly Donation Toggle
See the One-Time vs Monthly Donation Toggle for a related forms pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

On blur the first time you leave a field (it becomes "touched"), and on every input after that. This avoids showing red while you are still typing a value for the first time, but gives instant feedback once you have engaged the field and are correcting it. Empty, untouched fields stay neutral until submit.

Each field name maps to a function in the validators object that takes the value and returns an empty string (valid) or an error message (invalid). Add a field by adding an input with a data-name and a matching validator; change a rule by editing its function. No DOM code changes are needed because validation is data-driven.

It disables the browser's default bubble validation so this script can present consistent, styled, inline messages instead. The inputs still carry semantic attributes (type=email, required, minlength), which help autofill, mobile keyboards, and assistive technology, but the visible validation and submit gating are handled in JavaScript for full control.

Every field is force-validated (even untouched ones), the form does not submit, and focus moves to the first invalid input so the user is taken straight to the problem. When all fields pass, the success branch runs — here it shows a confirmation; in your app you would call your API.

Keep the validators as plain functions and hold each field's value, touched flag, and error in state. Compute the error on blur and on change, render the valid/invalid classes and messages from state, and gate submit on all errors being empty. React Hook Form, VeeValidate, or Angular Reactive Forms can replace the plumbing while keeping the same rules and timing. Tailwind users swap the classes for utilities.