How to get form validity without submitting it or triggering field errors

[ETombuyses]

Hello,

I am working on a Nextjs project and I have a case where I want to know the validity state of the form at any moment to enable/disable my submit button.
I tried to use the form.valid property but it seems that it is considered valid until we try to submit the form.

I know there is the shouldValidate: 'onInput' option but it only validates a particular field and not the entire form of what I understood. I can see the zod errors in the parseWithZod(formData, { schema }) result but it does not affect the valid state of the form anyway.

What I tried is to use a custom isValid state that is updated every time the field validation runs. I then pass it to my submit button via props, it's really annoying to have to do it for every button.

This solution works but it requires to use the shouldValidate: 'onInput' mode but I do not want onInput field errors to show, I would like to display errors onBlur, but I need onInput to know the form validity at any value change.

  const [isValid, setIsValid] = useState(false);

  const [form, fields] = useForm<Schema>({
    lastResult,
    onValidate: ({ formData }) => {
      const parsed = parseWithZod(formData, { schema });

      if (
        !parsed.status &&
        (!parsed.error ||
          (parsed.error && Object.keys!(parsed.error).length === 0))
      ) {
        setIsValid(true);
      } else {
        setIsValid(false);
      }

      return parsed;
    },
    constraint: getZodConstraint(schema),
    shouldValidate: 'onInput', // I do not want field errors to display on input but rather onBlur, but I need onInput to know the form validity after avery input
    shouldRevalidate: 'onInput',
    ...formOptions,
  });

How it is used in my button

const ConformSubmitButton = ({
formId,
isFormValid, // my custom isValid state I created in the parent
disabled,
children,
...props
}: ConformSubmitButtonProps) => {
const form = useFormMetadata(formId);

return (
  <Button
    type="submit"
    disabled={
      disabled ?? (!form.dirty || !isFormValid || !form.valid)
    }
    {...props}
  >
    {children}
  </Button>
);
};

Is there way I could get live data of the form validity without submitting it or triggering field errors ?

Here is a code sandbox with the solution I tried

I think the most important thing to know is if all required fields have been filled, not if they really are zod schema compliant, otherwise there is a risk we cannot click on the submit button when we finished typing the last required field but have not yet blurred

[marcomuser]

Usually, I would propose to not disable the submit button at all but trigger the form validation and focus the first field with an error on submit. This is what browsers do by default. There are some UX pitfalls with disabled submit buttons to think about, see https://www.smashingmagazine.com/2021/08/frustrating-design-patterns-disabled-buttons/. If that would be acceptable to your requirements your problem would just disappear all-together. If that doesn't fulfill your specific requirements, you could look into using parseWithZod with current form.value converted to a FormData object. This would allow you to validate the validity of your form independent of the onValidate handler and thus also of whether you trigger it onInput or onBlur. If you want to run parseWithZod outside of onValidate you will need to get the current form values in a form data object, which conform does not handle out of the box. In order to convert from the form.value shape to the FormData object shape, you need to follow the naming convention that conform uses for arrays and nested objects. There is a function in conform that is used for this transformation that you could reuse for this purpose (It's not exported though!), see:

conform/packages/conform-dom/formdata.ts

Line 251 in 6b98c07

export function flatten(

All in all, it's a bit complex and involved. Maybe others have better suggestions? :) I would usually opt for not disabling submit buttons to give the user the possibility to figure out what the missing pieces are.

One more observations: form.valid simply reflects if there are currently any errors in the form state. So it reflects the result of parseWithZod in the onValidate fn. It does not depend on a submit unless you configured that the form should validate only onSubmit. If the onValidate fn never ran, e.g. because the user has not interacted with the form yet, then it will be true because form.allErrors will be empty.

[marcomuser]

Alternatively, if your form is not too dynamic you could also write a simple function that just checks if all your required fields have a truthy value in form.value. Maybe that would be a simpler compromise?

[ETombuyses]

Thank you for your response.

I read your article and discussed it with my team. We agreed that not disabling the button is an acceptable solution for now. I will keep your suggestion in mind in case we decide to disable the button in the future.

I would like to clarify what I said about the form.valid value. What was bothering me is that the form is considered valid as long as no errors are triggered by the onValidate function with parseWithZod, just as you said. However, I had hoped that the form would be considered valid only if it validates the entire Zod schema, not just the already filled input fields. So, I expected the form to be invalid if not all required fields have been filled in.

I will let you know if we ever decide to disable the submit button and if your suggested approach works!

[marcomuser]

I absolutely get your point about form.valid. Was wrestling with something similar myself recently (see: #625). I don't recall from the top of my head what constraints form.valid has to follow, i.e. if it would be possible to reflect your expectations. I suspect that if there is a specific reason for it to not work as you expect it might have to do with the Proxy based setup (or maybe with how zod parses partial objects? just thinking out loud..). Would need to dive into the specific part of the codebase to figure it out or maybe @edmundhung can chime in and give us a pointer. :)