How to manually validate the whole form?

[JasonColeyNZ]

Hi there,

I have a requirement to validate the entire form from a button, and have the UI update to show the form errors, how can I do this?

Regards
Jason Coley

[edmundhung]

Conform will validate the entire form when you click on any submit buttons. If you don't want it to be submitted, you can set a custom name and value to the button and call event.preventDefault() in the onSubmit handler manually.

export function Example() {
  const [form, fields] = useForm({
    onSubmit(event, { formData }) {
       // The name "intent" and value "validate" depends on what you set on the button
       if (formData.get('intent') === 'validate') {
          event.preventDefault(); // This will stop it from being submitted
       }
    }
  })

  return (
    <form>
      {/* .... */}
      <button name="intent" value="validate">Validate form</button>
    </form>
  ); 
}

[JasonColeyNZ]

How can this be done in code, I have tried to change an intent input with a validate value before trying to submit but if I use the form.ref.current.submit(), the onSubmit isn't fired from useForm()?

[JasonColeyNZ]

The idea here is to do validation via code, I am using Remix.js useFetcher to POST the form. an Example of using a fetcher would be good.

[Pouet--]

Hello, you can submit your form using a fetcher, and get the errors back in the submission.error field.
I use something like this :

export function Example() {
  const fetcher = useFetcher();
  const [form, {username, password}] = useForm({
    lastSubmission: fetcher.data,
  })

  return (
    <fetcher.Form method="post" action="/road/to/your/fetcher" {...form.props}>
      {/* global form errors */}
      {form.errors.length > 0 && (
        <p>{JSON.stringify(submitForm.errors)}</p>
      )}

      {/*of course you can access individual field errors via username.error and password.error */}
      <input type="text" {...conform.input(username)}></input>
      {username.error && (
        <p>{username.error}</p>
      )}
    </fetcher.Form>
  ); 
}

And in your fetcher action :

export async function action({ request, params }: ActionFunctionArgs) {
 const formData = await request.formData();

 const submission = parse(formData, { schema });

 if (submission.intent !== "submit" || !submission.value) {
   return json(submission);
 }

 {/* do your things with your database or API here */}
 {/* populate the submission object and return it */}
 
 return json(submission);
}

This is classic behavior, if the validation fails you will get the errors back in form.errors and you can display it as mentioned.

If you want to avoid server-side validation and do it client-side, just adapt your useForm like this :

const [form, {username, password}] = useForm({
  lastSubmission: fetcher.data,
  onValidate({ formData }) {
     return parse(formData, { schema });
   },
})

[JasonColeyNZ]

Thanks for the suggestion, but I don't really want to send to the server on first validation, doesn't make a lot of sense. I prefer to use both client and server validation.