chore(form): revalidate on any change after error in field (#8)

* chore(form): revalidate on any change after error in field

* fix(form): pr fixes

* fix(form): pr fix

Author: yzuyr

packages/form/src/index.test.ts

@@ -1363,3 +1363,81 @@ describe("createForm — re-render resilience", () => {
     cleanup(el);
   });
 });
+
+describe("createForm — error clearing on fix", () => {
+  it("clears errors on change after failed submission", () => {
+    const el = makeForm(basicHtml);
+    const form = createForm({ el, schema: basicSchema, onSubmit: () => {} });
+    const unmount = form.mount();
+
+    setField(el, "email", "bad");
+    submit(el);
+    expect(Object.keys(form.errors()).length).toBeGreaterThan(0);
+
+    const input = setField(el, "email", "ada@example.com");
+    setField(el, "name", "Ada");
+    dispatch(input, "change");
+
+    expect(form.errors()).toEqual({});
+    unmount();
+    cleanup(el);
+  });
+
+  it("clears errors on input keystroke after failed submission", () => {
+    const el = makeForm(basicHtml);
+    const form = createForm({ el, schema: basicSchema, onSubmit: () => {} });
+    const unmount = form.mount();
+
+    setField(el, "email", "bad");
+    submit(el);
+    expect(Object.keys(form.errors()).length).toBeGreaterThan(0);
+
+    const input = setField(el, "email", "ada@example.com");
+    setField(el, "name", "Ada");
+    dispatch(input, "input");
+
+    expect(form.errors()).toEqual({});
+    unmount();
+    cleanup(el);
+  });
+
+  it("does not revalidate on change when there are no errors (validateOn: submit)", () => {
+    const el = makeForm(basicHtml);
+    const form = createForm({
+      el,
+      schema: basicSchema,
+      onSubmit: () => {},
+      validateOn: "submit",
+    });
+    const unmount = form.mount();
+
+    // no prior submission — errors are empty
+    const input = setField(el, "email", "bad");
+    dispatch(input, "change");
+
+    // should stay empty — no proactive validation when clean
+    expect(form.errors()).toEqual({});
+    unmount();
+    cleanup(el);
+  });
+
+  it("does not revalidate on input when there are no errors (validateOn: submit)", () => {
+    const el = makeForm(basicHtml);
+    const form = createForm({
+      el,
+      schema: basicSchema,
+      onSubmit: () => {},
+      validateOn: "submit",
+    });
+    const unmount = form.mount();
+
+    // no prior submission — errors are empty
+    const input = setField(el, "email", "bad");
+    dispatch(input, "input");
+
+    // should stay empty — no proactive validation when clean
+    expect(form.errors()).toEqual({});
+    unmount();
+    cleanup(el);
+  });
+});

packages/form/src/index.ts

@@ -70,9 +70,13 @@ export type FormErrors = Record<string, string[]>;
 /**
  * When to run schema validation automatically against field changes.
  *
- * - `"submit"` (default) — only on form submission
- * - `"change"` — on `change` events (after a field loses focus with a new value)
- * - `"input"` — on every `input` event (every keystroke)
+ * - `"submit"` (default) — defers validation to submission while the form is
+ *   clean (no active errors). Once a submission fails, the form automatically
+ *   revalidates on every `change` and `input` event until all errors are
+ *   cleared, at which point it returns to submit-only validation.
+ * - `"change"` — validates on every `change` event (and on `input` when errors
+ *   are active).
+ * - `"input"` — validates on every `input` event (every keystroke).
  */
 export type ValidateOn = "submit" | "change" | "input";
 
@@ -347,11 +351,8 @@ export function createForm<S extends StandardSchemaV1>(options: CreateFormOption
 
     mount() {
       dirty = false;
-      currentErrors = {}; // always reset on every mount
+      currentErrors = {};
 
-      // Tracks the latest value per field — seeded with defaults, updated on
-      // change/input. The MutationObserver restores these after re-renders so
-      // user-edited values survive DOM reconstruction.
       const trackedValues = new Map<string, string | string[]>();
 
       if (defaultValues) {
@@ -402,15 +403,31 @@ export function createForm<S extends StandardSchemaV1>(options: CreateFormOption
         }
       }
 
+      function runFieldValidationIfErrors(): void {
+        if (Object.keys(currentErrors).length > 0) runFieldValidation();
+      }
+
       on(el, "submit", (e) => runSubmit(e as SubmitEvent));
+
       on(el, "change", () => {
         trackCurrentValues();
         markDirty();
+        if (validateOn === "change") {
+          runFieldValidation();
+        } else {
+          runFieldValidationIfErrors();
+        }
       });
-      on(el, "input", trackCurrentValues); // always track on input, regardless of validateOn
 
-      if (validateOn === "change") on(el, "change", runFieldValidation);
-      if (validateOn === "input") on(el, "input", runFieldValidation);
+      on(el, "input", () => {
+        trackCurrentValues();
+        markDirty();
+        if (validateOn === "input") {
+          runFieldValidation();
+        } else {
+          runFieldValidationIfErrors();
+        }
+      });
 
       let observer: MutationObserver | null = null;
       if (defaultValues) {