Can I declare a schema at the form level, but have it applied at the field level for just that field?

[craigmcc]

I'm using the cool useAppForm() returned from createFormHook() to start assembling a reusable set of components.

In an actual form component, I'll do something like this:

  const defaultValues: SignUpSchemaType = {
    confirmPassword: "",
    email: "",
    name: "",
    password: "",
  }

  const form = useAppForm({
    defaultValues,
    onSubmit: async (values) => {
      await submitForm(values.value);
    },
    validators: {
      onChange: SignUpSchema,
    },
  });

SignUpSchema is a Zod schema I have defined elsewhere, and SignUpSchemaType is its inferred type. Doing things this way means that TSF's inference magic works quite nicely.

However, when I enter a value into the very first field, it fires all of the field validations, even though I have not gotten to the rest of them yet. That isn't a very pleasant user experience.

Is there a way to declare my schema at the form level, as it is here, but at the field level have only the validation(s) for that particular field executed?

[Balastrong]

If we're talking about UX in the terms of "I want to show the error only for the fields where it makes sense" the advice is to play with the field.state.meta.isTouched flag.

Validation is still fired for all fields as we're just passing the form state to the zod schema, but the user doesn't know what zod is (and probably doesn't care)

[callmemb]

example of reusable component displaying error only for related field:

  const {
    handleChange,
    state: {
      value,
      meta: { errors, isTouched },
    },
  } = useFieldContext<string>();

  const errorMessage = isTouched ? errors.map((e) => e.message).join(",") : "";

  return (
    <>
      <input value={value} onChange={(e) => console.log(e.target.value)} />
      {errorMessage ? <div className="error">errorMessage</div> : null}
    </>
  );
  

[craigmcc]

Thanks for this pointer! However, it still leaves me with a problem (even after surrounding errorMessage with curly brackets in the last part).

• If I type a single character in the first field (name, in my case), it no longer triggers error messages on all the other fields. Yay!
• If I just tab through all of the fields (with no inputs anywhere), I get no error messages at all. That seems to imply that isTouched is not sufficient to cover all the use cases.
• Interestingly, though, my Save button stays disabled in the latter category. That's currently based on canSubmit state not being true.

That last issue is true universally, if I try to use onBlur instead of onChange (my preference, based on the fact that I'm porting this app from a ReactHook Forms based app that does the right thing on onBlur declarations). But that's probably a separate discussion issue.

[callmemb]

'touched' should be sufficient if you want it to display error after tabbing threw fields.
I don't have time to check it myself but i think just adding validation on blur would be enough.

    validators: {
      onChange: SignUpSchema,
      onBlur: SignUpSchema,
    },