Validation execution at different timestamp when using third party library for Validation

[younessdev9]

I find it quite tricky when adding validation using Yupjs and when using the native Validation that comes with RHF(react-hook-form) so basically, I'm trying to intercept the onSubmit function that the handleSubmit consumes

I have Form as steps and I'm having a yup validation already set see example

export default function App() {
  const [step, setStep] = useState(0);
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(schema),
  });
  const onSubmit = (data) => {
    // I do intercept the data before sending it to the server
    if (data.desc === 'hello world!') {
      setStep((step) => step + 1);
    } else {
   sendToServer(data)
}
  };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {step === 0 && (
        <>
          <input {...register('firstName')} />
          <p>{errors.firstName?.message}</p>
        </>
      )}

      {step === 0 && (
        <>
          <input {...register('age')} />
          <p>{errors.age?.message}</p>
        </>
      )}

      <input type="submit" />
    </form>
  );
}

what happens is when hitting submit the validation gets executed and the errors log out, which doesn’t when using the RHF validation after reading the source code of this file I found that the execution of the schema validation happens in the handleSubmit function which doesn’t in the register function, as far as I know, I'm requesting to have a unified time when the validation gets executed

[bluebill1049]

what do you mean by different timestamps? are we talking about ms in here?

[younessdev9]

I mean by that the order of executing is different when using third party libraries for validation compared to when using the register() validation

[bluebill1049]

schema is at the form level, and build-in is at the field level.

[younessdev9]

yes, and I suggest that it would be great if they're executed in the same order no matter what validation you’re using

[Upinwv]

---

[Upinwv]