Seamless Form Validation with TanStack Form and Zod

Not a member? Read it here.

Previous part

Advanced Form Validation with TanStack Form | by Tomas Svojanovsky | Mar, 2025 | Medium

Server Validation

Do you need to call an API to check if a username already exists? No problem! Let’s create a function with three dummy usernames. If the username exists, we will return an error; otherwise, we will return null.

export function usernameValidation(username: string) {
    return new Promise<string | null>(resolve => {
        console.log("Validating username", username);

        setTimeout(() => {
            const isUsernameTaken = ["test", "admin", "foo"].includes(username);

            resolve(isUsernameTaken ? "Username already taken" : null);
        }, 1000);
    });
}

For username validation, you can add it like this:

<form.Field
      name="username"
      validators={{
          onChangeAsyncDebounceMs: 500,
          onChangeAsync: ({ value }) => usernameValidation(value),
          onChange: z.string().min(3, "Username must be at least 3 characters long"),
      }}

Handling Async Validation