Validation modes (validateOn)

Formora makes validation timing explicit. You choose when validation runs, and Formora never changes this behavior behind your back.

This avoids hidden rules and unpredictable UX.

---

Available modes

Formora supports exactly three validation modes:

• submit — validate only when submitting
• change — validate on every value change
• blur — validate when a field loses focus

You choose one mode per form:

const form = useForm({
  validateOn: "blur",
});

---

submit mode

When to use it

Use submit when:

• forms are simple
• you want minimal interruption
• errors should appear only after user intent

Behavior

• No validation while typing
• Validation runs only on submit
• Errors populate after submit and stay until fixed or reset

const form = useForm({ validateOn: "submit" });

info

This mode matches traditional HTML form behavior.

Important note

In submit mode, isValid may be true before the first submit, because validation has not run yet.

Do not rely on isValid alone to disable a submit button in this mode.

---

change mode

When to use it

Use change when:

• you want instant feedback
• fields have strict formatting rules
• errors should never lag behind input

Behavior

• Validation runs on every change
• Errors appear immediately
• Errors update as the user types

const form = useForm({ validateOn: "change" });

Important note

On the first render, no validation has run yet. Until the user types, errors can be empty and isValid may be true.

If you disable a submit button, combine isValid with your own checks (for example, required values present).

---

blur mode (recommended)

When to use it

Use blur when:

• you want a balanced UX
• users should finish typing before seeing errors
• forms are non-trivial

Behavior

• Validation runs when a field loses focus
• Errors appear after the user finishes editing
• Errors stay visible until fixed

const form = useForm({ validateOn: "blur" });

tip

This mode works best for most real-world production forms.

Important note

Just like change mode, isValid can be true on the first render.

Use touched, dirty, or required-value checks to control UX.

---

Validation vs error visibility

Validation determines what errors exist.

Error visibility is a UI decision.

Formora exposes:

• errors — what is invalid
• touched — whether a field was interacted with

You decide when to show errors:

// Show after blur
{
  form.touched?.email && form.errors?.email && (
    <p>{String(form.errors.email)}</p>
  );
}

// Show immediately
{
  form.errors?.email && <p>{String(form.errors.email)}</p>;
}

---

Comparison

Mode	When validation runs	Typical UX
submit	On submit only	Calm
change	On every change	Instant
blur	On blur	Balanced

---

Summary

• validateOn controls when validation runs
• No mode is "better" — each serves a different UX goal
• blur is recommended for most production apps
• isValid reflects current errors, not user intent

Choose the mode that matches how you want users to experience your form.