Validate Form Fields on Blur (Not on Every Keystroke)

The problem: errors while the user is still typing

If you validate on every input event, the email field turns red after j because j is not a valid address. The user sees failure before they finish, learns to ignore red borders, and sometimes stops typing altogether. Submit-only validation avoids that annoyance but hides every mistake until the end, when fixing five fields at once feels like homework.

The middle path is interaction-aware timing: wait until the user leaves a field (blur) before you show its first error, then reward fixes immediately on the next input. That pairs well with native constraints (required, type="email", pattern) and with custom copy from changing the HTML5 validation message.

When to show errors: input, blur, or submit

Most production contact forms combine blur plus submit: blur for inline text, submit to catch skipped boxes and focus the first failure. The full Constraint Validation API tour lives in how to validate an HTML form with JavaScript.

Reward early, punish late

Treat validation as two different moments. Punish late: on blur, if the control is invalid, set aria-invalid="true" and show the message. Reward early: on input, as soon as el.checkValidity() passes, clear the message and set aria-invalid="false" even if the user has not blurred again. They fixed it — do not keep the old error visible until blur.

CSS-only styling with :user-invalid

Plain input:invalid matches empty required fields on first paint, so the form looks broken before interaction. Prefer :user-invalid and :user-valid, which wait until the user has changed the control:

<label for="email">Email</label>
<input id="email" name="email" type="email" required
  aria-describedby="email-error" />
<p id="email-error" role="alert"></p>

<style>
  input:user-valid { outline: 2px solid #059669; }
  input:user-invalid { outline: 2px solid #dc2626; }
</style>

Support is strong in Chromium and Firefox; Safari added :user-invalid in recent releases. Where it is missing, add a .touched class on blur and mirror the selector:

input.touched:user-invalid,
input.touched:invalid {
  outline: 2px solid #dc2626;
}

CSS can hint with color but cannot write accessible error text — pair pseudo-classes with the JavaScript pattern below for messages and ARIA.

Vanilla JavaScript: blur, input, and submit

Keep one error paragraph per field, linked with aria-describedby. On blur, call checkValidity(), mirror validationMessage, and toggle aria-invalid. On input, clear when valid. On submit, block if anything still fails and focus the first invalid control:

<form id="lead" action="https://splitforms.com/api/submit" method="post">
  <input type="hidden" name="access_key" value="YOUR_KEY" />

  <label for="email">Email</label>
  <input id="email" name="email" type="email" required
    aria-describedby="email-error" />
  <p id="email-error" role="alert"></p>

  <button type="submit">Send</button>
</form>

<script>
  const form = document.getElementById("lead");

  function showError(el) {
    const err = document.getElementById(el.id + "-error");
    if (!el.checkValidity()) {
      el.setAttribute("aria-invalid", "true");
      el.classList.add("touched");
      if (err) err.textContent = el.validationMessage;
      return false;
    }
    el.setAttribute("aria-invalid", "false");
    if (err) err.textContent = "";
    return true;
  }

  form.querySelectorAll("input, select, textarea").forEach((el) => {
    el.addEventListener("blur", () => {
      if (!el.required && el.value === "") return;
      showError(el);
    });
    el.addEventListener("input", () => {
      if (el.checkValidity()) showError(el);
    });
  });

  form.addEventListener("submit", (e) => {
    let firstBad = null;
    for (const el of form.querySelectorAll("input, select, textarea")) {
      if (!showError(el)) firstBad ??= el;
    }
    if (firstBad) {
      e.preventDefault();
      firstBad.focus();
    }
  });
</script>

This uses the browser's built-in messages (customize them with setCustomValidity as in the custom HTML5 guide). For disabling the button until the whole form passes — a separate UX choice — see disable the submit button until the form is valid.

React: touched state and onBlur

function Field({ name, label, ...props }) {
  const [touched, setTouched] = useState(false);
  const [error, setError] = useState("");
  const id = useId();
  const errorId = id + "-error";

  return (
    <>
      <label htmlFor={id}>{label}</label>
      <input
        id={id}
        name={name}
        aria-invalid={error ? "true" : undefined}
        aria-describedby={error ? errorId : undefined}
        onBlur={(e) => {
          setTouched(true);
          const el = e.currentTarget;
          setError(el.checkValidity() ? "" : el.validationMessage);
        }}
        onChange={(e) => {
          const el = e.currentTarget;
          if (touched && el.checkValidity()) setError("");
        }}
        {...props}
      />
      {touched && error ? (
        <p id={errorId} role="alert">{error}</p>
      ) : null}
    </>
  );
}

On form submit, set touched on every field (or call reportValidity() once) so untouched invalid controls surface. Libraries like React Hook Form expose mode: "onBlur" for the same timing without reimplementing the flags.

Common mistakes

• Blur when clicking Cancel: focus leaves the field before the click handler runs. Use a dirty flag or relatedTarget checks so you do not scold an empty field the user never edited.
• Autofill: saved values may not fire input. Listen for change and run a silent validity pass on load if you disable submit until valid.
• Optional fields: do not run pattern checks on blur when value === '' and the field is not required.
• Using :invalid alone: required empty inputs look invalid on page load. Use :user-invalid or .touched.

Send the valid form to splitforms

Client-side blur validation is UX, not security. When every field passes, POST to your endpoint — for example https://splitforms.com/api/submit with your public access key — or paste markup into the form validator. Validate again on the server. Sign up free for a splitforms endpoint that stores submissions and emails you when the form is valid.

FAQ

References: MDN: :user-invalid and MDN: aria-invalid.