title: Perform function after form validation
body: <p>I am using react, typescript, and Email JS library. I am using the react-hook-form library and yup to validate forms.</p>
  <p>I have worked out the validation and sending the email, but I am unable to do both these functions together. When a user submits the form, I want the &quot;sendEmail&quot; function to be called if the &quot;handleSubmit(onSubmit)&quot; function which validates the form is successful.</p>
  <p>The form's 'onSubmit' property needs to be changed so that both of these can be called.
  Currently I can call these individually with 'onSubmit={sendEmail}' or 'onSubmit={handleSubmit(onSubmit)}' and they will work.</p>
  <p>What I tried was to put the expression 'handleSubmit(onSubmit)' inside the sendEmail function but validation did not work then.</p>
  <p>I have also used react-hook-form library.</p>
  <pre><code>import React, { useRef, useState } from &quot;react&quot;;
  import { useForm } from &quot;react-hook-form&quot;;
  import { yupResolver } from &quot;@hookform/resolvers/yup&quot;;
  import { string, number, object, InferType } from &quot;yup&quot;;
  import { url } from &quot;inspector&quot;;
  import emailjs from &quot;@emailjs/browser&quot;;
  
  function onSubmit(values: Props) {}
  
  type Props = InferType&lt;typeof schema&gt;;
  
  const schema = object({
    firstName: string().required(&quot;First name is required&quot;),
    lastName: string().required(&quot;Last name is required&quot;),
  });
  
  function FormEmail() {
    const form = useRef(null);
    const [value, setValue] = useState&lt;string | undefined&gt;();
  
    const {
      register,
      handleSubmit,
      formState: { errors },
    } = useForm&lt;Props&gt;({
      resolver: yupResolver(schema),
    });
  
    const sendEmail = (e: { preventDefault: () =&gt; void }) =&gt; {
      handleSubmit(onSubmit)();
      e.preventDefault();
  
      emailjs
        .sendForm(
         'YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', form.current!, 'YOUR_PUBLIC_KEY'
        )
        .then(
          (result: { text: any }) =&gt; {
            console.log(result.text);
          },
          (error: { text: any }) =&gt; {
            console.log(error.text);
          }
        );
    };
  
  return (
      &lt;div&gt;
        &lt;form onSubmit={handleSubmit(onSubmit)} ref={form}&gt;
  
              &lt;h3&gt;First Name&lt;/h3&gt;
              &lt;input
                id=&quot;firstName&quot;
                type=&quot;text&quot;
                {...register(&quot;firstName&quot;)}
              /&gt;
              &lt;span className=&quot;error&quot;&gt;{errors?.firstName?.message}&lt;/span&gt;
  
              &lt;h3&gt;Last Name&lt;/h3&gt;
              &lt;input
                id=&quot;lastName&quot;
                type=&quot;text&quot;
                {...register(&quot;lastName&quot;)}
              /&gt;
              &lt;span className=&quot;error&quot;&gt;{errors?.lastName?.message}&lt;/span&gt;
  
              &lt;button className=&quot;&quot; type=&quot;submit&quot;&gt;
                Submit
              &lt;/button&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    );
  }
  
  export default FormEmail;
  
  
  </code></pre>