How does Form submit as a default event?

#react #typescript

Use a trigger provided react-hook-form and call this in custom submit method.
This approach is using basic JavaScript.

const formSchema = z.object({
  name: z.string(),
});
const Form = () => {
  const { register, trigger } = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
  });

  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    const isValid = await trigger();
    if (!isValid) {
      e.preventDefault();
      return;
    }
    // if you want to add something to the form, you can write it here.
  };

  return (
    <form onSubmit={onSubmit}>
      <input {...register('name')} />
      <button type="submit">Submit</button>
    </form>
  );
};