How to validate fields individually on change and not the entire form, but the validator will be set at the form level

[onyedikachi23]

In React Hook Form, mode: "onChange" validates fields individually and not the entire form when a field value changes.

Due to constraints, I have to set the validators at the form level in Tanstack Form. However, it's a bad user experience when the user is interacting with a field, then other fields suddenly turn red.

const form = useForm({
		defaultValues: {
			name: "",
			email: "",
			password: "",
			confirmPassword: "",
		} as SignupForm,
		validators: {
			onChange: formSchema, // validate fields individually
		},
		onSubmit: ({ value }) => {
			alert(JSON.stringify(value, null, 2));
		},
	});

[LeCarbonator]

Answered on the Discord, but to reiterate here:

Utilize the field meta state to prevent untouched fields from showing errors. isTouched, isValid and isBlurred to mention three.

[onyedikachi23]

Using the field meta state still doesn't stop the work in the background. If the work won't contribute anything to the UI, it shouldn't be running. Although my forms are not big, but think of applications with huge forms.

[LeCarbonator]

Of course it doesn't stop the work in the background, it's a form validator. I'm not sure what kind of solution you're seeking that

• Uses form-level validation instead of field-level (due to some constraint you specified)
• Only runs when its relevant field runs (which would be field-level validation)
• Only updates the field that triggered the change (which throws away all the other computed errors of the fields)

If you want to minimize the work done in the background, then field level validation is the way to go. My personal suggestion is that zod schemas are incredibly fast, and will not be the major impact of your React-based form. It keeps logic in the logic section of your component and can avoid canSubmit being true if there are missing fields.

[onyedikachi23]

I really don't want to be manually setting validators for each field every time for every form. This was super easy with React Hook Form; mode="onchange" validated the active field only and not the entire form.

If Tanstack Form could support an extra field, maybe called onChangeField in formOptions.validators. It'd be really redundant having to set validators for each field manually whereby I could just do it at the form level.

Maybe it's because I'm coming from React Hook Form, but that individual validation really helps to compose my forms better.

[LeCarbonator]

I'm seriously not sure what you're asking. This 'onChange' resolving mode you're talking about does not apply to zod schemas. You can test it here: https://stackblitz.com/edit/vitejs-vite-rdtmjf4e?file=src%2FApp.tsx

So my question is - why is this suddenly an issue if you have it on TSF?

[onyedikachi23]

I think I found a similar issue #1272.

I also found a PR for this feature that was closed: #1286. @Balastrong I really wish you had approved that PR.

As you can see, this is a common feature request from those coming from React Hook Form.

[LeCarbonator]

Alright! So you're finally addressing the request. What you're asking for is the revalidate mode of RHF. Yes, we are planning to implement a way you can change how validators work, and when. That would also allow us to add some common behaviour from other libraries (like RHF) in small functions.

There is no PR to point at yet, though.

[onyedikachi23]

I think you should be seeing this as a first-class feature and not referring to it as from other libraries.

While I wait, here's a workaround I'm using at the field level:

const { isTouched, isBlurred, isValid } = field.state.meta;

const shouldShowError =
		// the field is currently actively interacted with.
		(isTouched && !isBlurred) ||
		// the form has been submitted at least once AND is currently invalid.
		(!field.form.state.canSubmit &&
			field.form.state.submissionAttempts > 0);

const isFieldInValid = !isValid && shouldShowError;

Though, it still doesn't stop the redundant background validation.

[onyedikachi23]

I Just checked the React Hook Form docs. I'm actually requesting for the mode not the revalidateMode:

mode Validation strategy before submitting behaviour.
reValidateMode Validation strategy after submitting behaviour.

[LeCarbonator]

I think you should be seeing this as a first-class feature and not referring to it as from other libraries.

While I wait, here's a workaround I'm using at the field level:

const { isTouched, isBlurred, isValid } = field.state.meta;



const shouldShowError = (isTouched && !isBlurred) || !field.form.state.canSubmit;



const isFieldInValid = !isValid && shouldShowError;

Though, it still doesn't stop the redundant background validation.

Your comment shows that you're only familiar with react-hook-form. There are users from Solid, Angular, Svelte and Vue that will have their own idea of how validate modes and revalidateMode should work. That's why we're not rushing into it.

I'll gladly end it here since the pretentious tone is not worth responding to. I've shared the example that shows that zod schemas ran on change as well, but RHF manages the isTouched conditional render for you. You're in control for that in this library instead. If that's a deal-breaker, then there's luckily still RHF to rely on.