TanStack form-core sync validation and submit: working versions (tested 2026-10-15)

{
  "name": "tanstack-form-core-validation",
  "private": true,
  "type": "module",
  "scripts": {
    "test": "node --import tsx --test test/*.test.ts"
  },
  "dependencies": {
    "@tanstack/form-core": "1.33.5"
  },
  "devDependencies": {
    "@types/node": "26.6.5",
    "tsx": "4.23.15"
  }
}

import { FormApi } from "@tanstack/form-core";

export type Signup = { email: string; age: number };

export function createSignupForm(onValid: (v: Signup) => void) {
  const form = new FormApi<Signup>({
    defaultValues: { email: "", age: 0 },
    onSubmit: async ({ value }) => {
      onValid(value);
    },
  });
  form.mount();
  return form;
}

export function emailError(email: string) {
  if (!email.includes("@")) return "email must include @";
  return undefined;
}

export function ageError(age: number) {
  if (age < 18) return "must be 18+";
  return undefined;
}

import { test } from "node:test";
import assert from "node:assert/strict";
import { ageError, createSignupForm, emailError } from "../src/form.ts";

test("validators catch bad email and age", () => {
  assert.equal(emailError("not-an-email"), "email must include @");
  assert.equal(emailError("[email protected]"), undefined);
  assert.equal(ageError(16), "must be 18+");
  assert.equal(ageError(21), undefined);
});

test("form submits cleaned values", async () => {
  let submitted: { email: string; age: number } | undefined;
  const form = createSignupForm((v) => {
    submitted = v;
  });
  form.setFieldValue("email", "[email protected]");
  form.setFieldValue("age", 30);
  await form.handleSubmit();
  assert.deepEqual(submitted, { email: "[email protected]", age: 30 });
});