Trigger validation without call handleSubmit

[nphdiem]

Hi, I have a form with 2 steps. In the first step, I want to trigger validation after I click "Next" button (it likes after calling handleSubmit), so that the validation can begin to trigger after every time form values are changed.

I try to use trigger function but it just run validation when I click button and does not run again when I change form value.

I don't really want to use handleSubmit function, because I actually just move to next step and do not submit the form yet.
You can see the example form here: https://codesandbox.io/s/register-forked-9hqqjk?file=/src/App.js

Does anyone know how to handle this validation ?
Thanks in advance!

[leapful]

@nphdiem : You can use "mode: 'onChange'" option.

Working demo: https://codesandbox.io/s/register-forked-jhkl8u

[sandhana14]

Hi @leapful,
While I was looking for a solution for my problem which is exactly the same, i came here and tried the code in the sandbox. What my doubt is, we need to trigger the validation without calling handleSubmit() in the next button, right? but in the code we have still used the handleSubmit() which means we're submitting the form while clicking the next step as well as it triggers the validation, right? Correct me, if I'm wrong. Thanks!

[leapful]

@sandhana14

I've replied on your new discussion here: #10083

[sandhana14]

Thanks :)

[frankflej]

It works thanks alot

[joshuadkitenge]

// eslint-disable-next-line @typescript-eslint/no-explicit-any
function getProperty<T extends Record<string, any>, K extends FieldPath<T>>(
  obj: T,
  key: K
): T[K] | undefined {
  if (key === undefined) {
    return undefined;
  }

  const keys = key.toString().split('.');
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  let current: any = obj;

  for (const part of keys) {
    if (current && typeof current === 'object' && part in current) {
      current = current[part];
    } else {
      return undefined;
    }
  }

  return current as T[K];
}

React.useEffect(() => {
    const subscription = watch((_, type) => {
      if (
        type.name &&
        // check if error exist on altered value
        getProperty(
          errors,
          type.name
        )
      ) {
        clearErrors(type.name);
      }
    });
    return () => subscription.unsubscribe();
  }, [clearErrors, errors, watch]);

This should clear the error when changed the specific field has been altered.