Programatically validate a form

[mangej]

I want to programatically post a form with a fetcher from useFetcher and have been running into some problems with form validations.

I want to post the form on the onBlur() event for the input control, and I don't know how the do the form validation since the form validation will also be triggered on the same onBlur() event.

I tired to do it like this, but the form.isValid will not be correct, I guess it gets updated in the next render?

const form = useFormContext();
const handleOnBlur() => useCallback(async () => {
  await form.validate();
  console.log(form.isValid)
},[form])

It would be nice to get a return value from the form.validate() to understand if its valid or not.

Is it possible to do this in another way? I want to prevent the fetcher to post the form if the form is invalid.

[airjp73]

Hi! I think returning the validation result from validate makes sense so it's probably worth adding that feature. A submit helper would probably make this easier as well.

As a workaround, you should be able to call submit on the form element itself and that will run validations and submit via the fetcher. I haven't tested this though, so let me know if you run into any trouble.

const formRef = useRef<HTMLFormElement>(null);

const handleOnBlur = () => {
  formElement.current.submit()
}

return (
  <ValidatedForm formRef={formRef} validator={validator}>
    <MyInput onBlur={handleOnBlur} />
  </ValidatedForm>
);

[mangej]

Ah, nice.

I solved it with a workaround and used the same withZod validator that I created for the form which gave me the result of the validation
const validationResult = await validator.validate(formData);