EmailJs and Form validation control

Question

How do I add the verification of my fields!

I'm trying to send emails like this [emailjs][1], but I realise that I can also submit my empty form! So I'm wondering how to adjust my code so that it takes into account the verification of fields!

I have followed the documentation on emailjs about submitting a form with a name, email, subject, and message but there is one last problem! I've been following the documentation on emailjs regarding the submission of a form with a name, email, subject, and message, but there is still a problem: I am able to send my message successfully and I receive the data on emailjs and in my gmail mailbox, but I can also submit the empty form! How can I fix this? thank you

import React, { Fragment, useRef } from 'react';
import emailjs from 'emailjs-com';
import { Link } from 'react-router-dom';
import { NotificationContainer, NotificationManager } from 'react-notifications';


function Contact() {
  const form = useRef();

  const sendEmail = (e) => {
    e.preventDefault()

    emailjs
      .sendForm(
        'service_yyyyy', 
        'template_zzzz', 
         form.current, 
        'user_ttttt'
      )
        .then(
          (result) => {
            NotificationManager.success('Thank you for trusting us, we come back to you sooner.', 'Successful!', 2000);
        }, (error) => {
            NotificationManager.error('erreur dans le formulaire!', 'erreurs');
        });
    e.target.reset()
}

    return (
    <Fragment>

 <div className="regular-page-area section-padding-100">
        <div className="container">
            <div className="row">
                <div className="col-12">
                    <div className="page-content" style= {{backgroundColor:'white'}}>
                        <h4>text</h4>
                        <p>text</p>
                    </div>
                </div>
            </div>
        </div>
    </div>



<section className="medium-padding120 bg-body contact-form-animation scrollme">
  <div className="container">
    <div className="row">
      <div className="col col-xl-10 col-lg-10 col-md-12 col-sm-12  m-auto">

        
        <div className="contact-form-wrap">
          <div className="contact-form-thumb">
           <div className="col-12">
                    <div className="section-heading">
                        <h3  style= {{color:'white'}}>Contact form</h3>
                    </div>
                </div>

            <h2 className="title"><span>SEND</span> <span>US YOUR</span><span>MESSAGE</span></h2>
            <p>text</p>
            <img src={require('../../images/crew.png')} alt="crew" className="crew" />
          </div>
          <form ref={form} onSubmit={sendEmail} className="contact-form">
           
              <div className="col col-12 col-xl-12 col-lg-12 col-md-12 col-sm-12">
                <div className="form-group label-floating">
                  <label className="control-label"> Name</label>
                  <input
                    type="text" 
                    className='form-control' 
                    placeholder='Name'
                    name='name' 
                  />
              </div>
              </div>

              <div className="col col-12 col-xl-12 col-lg-12 col-md-12 col-sm-12">
                <div className="form-group label-floating">
                  <label className="control-label"> Email</label>
                  <input
                    type="email" 
                    className="form-control" 
                    placeholder="[email protected]" 
                    name='email'
                  />
                  </div>
        
                  <div className="form-group label-floating">
                  <label className="control-label"> Subject</label>
                  <input
                    type='text'
                    className="form-control" 
                    placeholder="Subject"
                    name='subject'
                   />
                </div>
        
                <div className="form-group">
                  <textarea
                  name="message"
                  className="form-control" 
                  placeholder="Your Message"
                  ></textarea>
                </div>
        
                <button type="submit" className="btn btn-purple btn-lg full-width">Send Message</button>
            </div>
          </form>
        </div>
        

      </div>
    </div>
  </div>

  <div className="half-height-bg bg-white"></div>
</section>

<NotificationContainer/>
<Footer />

    </Fragment>
        )
    }

export default Contact;