useForm mode onTrigger

[lukasvice]

I want to start the validation manually. This works well with the trigger function. However, I also want the revalidateMode to take effect from this point, so that the validation will take place onChange and the error messages will be displayed below the input field.
Therefore, an onTrigger mode would be helpful or maybe even something like form.startCustomValidationMode() with mode = custom?

Simplified example:

function MyComponent() {
  const form = useForm({
    // mode: 'onTrigger' // would be nice to have
  })

  const validate = async () => {
    const isValid = await form.trigger()

    if (isValid) {
      // do something
    }
  }

  return (
    <form>
      <input
        type="text"
        {...form.register('input', {
          required: 'This is required',
        })}
      />
      <div>{form.formState.errors.input?.message as string}</div>
      <button type="button" onClick={validate}>
        Validate
      </button>
    </form>
  )
}

[bluebill1049]

could you set mode to onSubmit and trigger by yourself?

[lukasvice]

There are a few ways, but honestly, I don't like any of them. They are hard do read or do not work with TypeScript.

const { isValid } = form.formState // Issue: this will force a re-render on state change

const validate = async () => {
  await form.handleSubmit(() => {})() // trigger submit, hard to read

  if (isValid) {
    // do something
  }
}

const validate = async () => {
  let isValid = false

  await form.handleSubmit(() => {
    isValid = true
  })() // use success callback, also hard to read

  if (isValid) { // Issue: for TypeScript, isValid is always false, because it does not now that the success callback is called
    // do something
  }
}

const validate = async () => {
  await form.handleSubmit(() => {})() // could be omitted if trigger would activate the validation mode
  const isValid = await form.trigger() // Issue: runs validations again?

  if (isValid) {
    // do something
  }
}

Or is there another way to submit manually and get the isValid state?

[tomchen]

See my post here: #10205

For your problem, if you want to get isValid, can you just test if formState.errors is an empty object, instead of using formState.isValid?