title: React Functional Component: How to prevent form from submitting if validation failed
body: <p>I need some help, I am new to react. I created a Functional Component form with Context API and I am trying to prevent it from submitting if the form failed validation and return false. I have check the validation and it is working by uncommenting the html input button and comment out the React Link (<code>&lt;Link&gt;&lt;/Link&gt;</code>) button. I try the code with class component and <strong>bind the <code>handleChange</code> and <code>handleSubmit</code></strong> inside the constructor and it work: however, I do not want to used the class component. I just want to used the function component.</p>
  <pre class="lang-js prettyprint-override"><code>const Employee = () =&gt; {
    const ctx = useContext(FormActualContext);
  
    const handleChange = (event) =&gt; {
      ctx.handleChange({
        event,
        type: 'employee',
      });
    };
  
    const validate = () =&gt; {
      const {
        firstName,
        lastName,
        email,
        dateOfBirth,
        phoneNum,
      } = ctx.formData.employee;
      const { employee } = ctx.formErrors;
      let {
        firstNameError,
        lastNameError,
        emailError,
        dateOfBirthError,
        phoneNumError,
      } = employee;
  
      firstNameError = !firstName ? 'First name can not be blank' : '';
      lastNameError = lastName === '' ? 'Last name can not be blank' : '';
      dateOfBirthError = !dateOfBirth ? 'Enter a valid date of birth' : '';
      if (!validateEmail(email)) {
        emailError =
          email === '' ? 'Enter a valid email' : `${email} is not valid email`;
      } else {
        emailError = '';
      }
      if (!validatePhoneNumber(phoneNum)) {
        phoneNumError =
          phoneNum === ''
            ? 'Enter a valid phone'
            : `${phoneNum} is not a valid phone number`;
      } else {
        phoneNumError = '';
      }
  
      if (
        firstNameError ||
        lastNameError ||
        emailError ||
        dateOfBirthError ||
        phoneNumError
      ) {
        ctx.setFormErrors({
          employee: {
            ...employee,
            firstNameError,
            lastNameError,
            emailError,
            dateOfBirthError,
            phoneNumError,
          },
        });
        return false;
      }
      return true;
    };
  
    const handleSubmit = (event) =&gt; {
      event.preventDefault();
      const isValid = validate();
      if (isValid) {
        ctx.reSetEmployee();
      }
    };
    const {
      employee: {
        firstNameError,
        lastNameError,
        emailError,
        dateOfBirthError,
        phoneNumError,
      },
    } = ctx.formErrors;
    return (
      &lt;div className=&quot;container_fluid&quot;&gt;
        &lt;div className=&quot;registration_form_container&quot;&gt;
          &lt;div className=&quot;register_context&quot;&gt;
            &lt;form action=&quot;&quot; onSubmit={handleSubmit} className=&quot;registration_form&quot;&gt;
              &lt;div className=&quot;form-group&quot;&gt;
                &lt;input
                  type=&quot;text&quot;
                  name=&quot;firstName&quot;
                  id=&quot;firstName&quot;
                  placeholder={'Enter first name'}
                  onChange={handleChange}
                /&gt;
                &lt;span&gt;{firstNameError}&lt;/span&gt;
              &lt;/div&gt;
              &lt;div className=&quot;form-group&quot;&gt;
                &lt;input
                  type=&quot;text&quot;
                  name=&quot;lastName&quot;
                  id=&quot;lastName&quot;
                  placeholder={'Enter last name'}
                  onChange={handleChange}
                /&gt;
                &lt;span&gt;{lastNameError}&lt;/span&gt;
              &lt;/div&gt;
              &lt;div className=&quot;form-group&quot;&gt;
                &lt;input
                  type=&quot;text&quot;
                  name=&quot;email&quot;
                  id=&quot;email&quot;
                  placeholder={'Enter email address'}
                  onChange={handleChange}
                /&gt;
                &lt;span&gt;{emailError}&lt;/span&gt;
              &lt;/div&gt;
              &lt;div className=&quot;form-group&quot;&gt;
                &lt;input
                  type=&quot;date&quot;
                  name=&quot;dateOfBirth&quot;
                  id=&quot;dateOfBirth&quot;
                  placeholder={'Enter date of birth'}
                  onChange={handleChange}
                /&gt;
                &lt;span&gt;{dateOfBirthError}&lt;/span&gt;
              &lt;/div&gt;
              &lt;div className=&quot;form-group&quot;&gt;
                &lt;input
                  type=&quot;text&quot;
                  name=&quot;phoneNum&quot;
                  id=&quot;phoneNum&quot;
                  placeholder={'Enter phone number (international: +1)'}
                  onChange={handleChange}
                /&gt;
                &lt;span&gt;{phoneNumError}&lt;/span&gt;
              &lt;/div&gt;
              &lt;div className=&quot;form-group custom_btn_container&quot;&gt;
                {/*&lt;input type=&quot;submit&quot; className=&quot;btn&quot; value=&quot;Register&quot;/&gt;*/}
                &lt;Link to=&quot;/addressForm&quot;&gt;
                  &lt;input type=&quot;submit&quot; className=&quot;btn&quot; value=&quot;Register&quot; /&gt;
                &lt;/Link&gt;
              &lt;/div&gt;
            &lt;/form&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  </code></pre>