Real Time Validation Issues On Client Side

[ian038]

Hi, I am currently using remix. When I submit the form, the server side validates it and then sends back the error messages to display to the user. I use safeParseForm() which allows me to send back a json like this:

  const result = safeParseForm(exampleSchema, formData)

  if (!result.success) {
    return json({ validationIssues: result.error.issues }, { status: 400 })
  }

And I can use the validationIssues in the front end like this:

   if (
      actionData?.validationIssues &&
      actionData?.validationIssues.length > 0
    ) {
      const { validationIssues } = actionData

       // show the validation issues in the user form

      setTimeout(() => {
        scrollToFirstError()
      }, 500)
    }

However, I want to do real time validation without submitting the form. Hence, I use validator.validate() on the client side to manually control the form. Something like this:

   <Form
          method='post'
          ref={validator.ref}
          onChange={() => {
            setActiveInput(true)
          }}>

    </Form>

My question is, how do I get the validationIssues using validator.validate() similar to safeParseForm() ?

[esamattis]

When you want the real time validation to happen submit the form with a flag (ex. hidden input) which instructs the action handler to do only the validation part of the form handling. When you actually submit the form, just remove the flag.

[ian038]

Thanks @esamattis for the response. I will give it a shot. 😄 👍