Track isSubmitted and isValid state client-side

[austinzentzkippdc]

If a user submits a form but it fails validation, I like to display some red text near the submit button: "Uh oh, your form has errors!"

React-hook-form passes a form state that includes isSubmitted and isValid for this purpose.

I've figured out a way to get what I need by patching a few methods:

export default function SignUp() {
  const [isSubmitted, setSubmitted] = useState(false);
  const [isValid, setValid] = useState(false);
  const lastSubmission = useActionData<typeof action>();
  const [form, fields] = useForm({
    lastSubmission,
    shouldValidate: "onBlur",
    onValidate({ formData }) {
      setValid(false);
      const parsed = parse(formData, { schema });
      if (Object.keys(parsed.error).length === 0) setValid(true);
      return parsed;
    },
  });

  return (
    <Form
      method="post"
      {...form.props}
      onSubmit={(e) => {
        setSubmitted(true);
        form.props.onSubmit(e);
      }}
    >
    {/* form */}
      {isSubmitted && !isValid && <p>Uh oh, your form has errors!</p>}
    </Form>
  )
}

This does a couple of things: when the form is submitted, I'm using a useState hook to set an isSubmitted variable to true. This happens regardless of whether the form is valid or not. Then, whenever onValidate runs, I'm using a separate useState hook to set isValid to true or false, depending on whether the form is valid.

This works, but it's not very portable. I'll have to set the custom onSubmit and onValidate wherever I use this form library.

Am I missing something built in? Is there a more straightforward way to get the formState I'm looking for?

[Pouet--]

Did you try to display the form errors ?

{form.errors.length > 0 &&
  <p>{JSON.stringify(form.errors)}</p>  // or <p>{form.error}</p> for the first encountered error
}

[austinzentzkippdc]

form.errors seems to be tracking something other than field-level errors. You can see in this codesandbox that form.errors is an empty array, even when username or password are invalid.

[Pouet--]

Why don't you use fields.username.error and fields.password.error ?

If you want to display a root-level error message, the best way is to populate the lastSubmission in your action function, like this :

return json({ ...submission, error: { '': ['Your form error message'] } })

But I do not know any way to populate it client-side, in the onValidate function...

[austinzentzkippdc]

Interesting idea to just use the fields:

const isValid = !fields.email.errors && !fields.password.errors;

This works with a handful of fields but gets pretty wonky with more fields. It doesn't look like the fields key is iterable, unfortunately:

const isValid = Object.keys(fields).every((key) => !fields[key].errors);

Object.keys(fields) looks like it's always an empty array, probably because Conform is doing some behind-the-scenes work to get field errors by named key; it's not a "real" Object, as best as I can tell.

If you want to display a root-level error message, the best way is to populate the lastSubmission in your action function, like this

That definitely works! The problem I'm facing is that I don't really want an invalid submission to hit the action function if I know it's invalid in advance, so some kind of client-side form state would probably be required.

Appreciate your thoughts on this, though!

[austinzentzkippdc]

Well, it looks like some additional form state may be coming in a future release.

[edmundhung]

There is no built-in state for these at the moment but we will have them supported very soon as you found :)

What you have above looks valid to me. But be aware that onSubmit is called only if there is no error, so if your consider the form submitted regardless there is any error, you can do this instead:

const [form, fields] = useForm({
    lastSubmission,
    shouldValidate: "onBlur",
    onValidate({ formData }) {
      const parsed = parse(formData, { schema });
      setValid(Object.keys(parsed.error).length === 0);
      if (parsed.intent === 'submit') setSubmitted(true);
      return parsed;
    },
  });

[austinzentzkippdc]

I appreciate your thoughts here. I like the onValidate state better than taking over the onSubmit in my solution earlier.

Great library! Looking forward to seeing the updates you're working on.