title: TypeError: Cannot read property 'validate' of undefined
body: <p>I am trying to validate my registration form but I'm getting this error and I can't solve it. my form submit button goes to <code>handleRegistration</code> which should validate the form first then submit. I was trying to follow the example in this link <a href="https://www.itsolutionstuff.com/post/password-and-confirm-password-validation-in-reactexample.html" rel="nofollow noreferrer">https://www.itsolutionstuff.com/post/password-and-confirm-password-validation-in-reactexample.html</a></p>
  <pre class="lang-js prettyprint-override"><code>handleRegistration(event) {
    event.preventDefault();
    if (this.validate()) {
      this.toggleModal();
      console.log(this.state);
      let input = {};
      input[&quot;name&quot;] = &quot;&quot;;
      input[&quot;email&quot;] = &quot;&quot;;
      input[&quot;password&quot;] = &quot;&quot;;
      input[&quot;confirmPassword&quot;] = &quot;&quot;;
      input[&quot;age&quot;] = &quot;&quot;;
      input[&quot;gender&quot;] = &quot;&quot;;
      this.setState({
        input: input
      });
      console.log(this.state)
      alert('Demo Form is submited');
    }
  }
  
  validate() {
    let input = this.state.input;
    let errors = {};
    let isValid = true;
  
    if (!input[&quot;fullname&quot;]) {
      isValid = false;
      errors[&quot;fullname&quot;] = &quot;Please enter your name.&quot;;
    }
  
    if (!input[&quot;email&quot;]) {
      isValid = false;
      errors[&quot;email&quot;] = &quot;Please enter your email Address.&quot;;
    }
  
    if (typeof input[&quot;email&quot;] !== &quot;undefined&quot;) {
  
      var pattern = new RegExp(/^((&quot;[\w-\s]+&quot;)|([\w-]+(?:\.[\w-]+)*)|(&quot;[\w-\s]+&quot;)([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
      if (!pattern.test(input[&quot;email&quot;])) {
        isValid = false;
        errors[&quot;email&quot;] = &quot;Please enter valid email address.&quot;;
      }
    }
  
    if (!input[&quot;password&quot;]) {
      isValid = false;
      errors[&quot;password&quot;] = &quot;Please enter your password.&quot;;
    }
  
    if (!input[&quot;confirmPassword&quot;]) {
      isValid = false;
      errors[&quot;confirmPassword&quot;] = &quot;Please confirm your password.&quot;;
    }
  
    if (!input[&quot;age&quot;]) {
      isValid = false;
      errors[&quot;age&quot;] = &quot;Please Enter your age.&quot;;
    }
  
    if (typeof input[&quot;password&quot;] !== &quot;undefined&quot; &amp;&amp; typeof input[&quot;confirmPassword&quot;] !== &quot;undefined&quot;) {
  
      if (input[&quot;password&quot;] != input[&quot;confirmPassword&quot;]) {
        isValid = false;
        errors[&quot;password&quot;] = &quot;Passwords don't match.&quot;;
      }
    }
  
    this.setState({
      errors: errors
    });
  
    return isValid;
  }
  
  handleChange(event) {
    let input = this.state.input;
    input[event.target.name] = event.target.value;
  
    this.setState({
      input
    });
  }
  </code></pre>
  <p>I am initalizing my input and errors objects in my state here</p>
  <pre class="lang-js prettyprint-override"><code>this.state = {
    isNavOpen: false,
    isModalOpen: false,
    isRegistrationModalOpen: false,
    input: {},
    errors: {}
  }
  </code></pre>
  <p>and my registration form is structured like that</p>
  <pre class="lang-html prettyprint-override"><code>&lt;Form onSubmit={this.handleRegistration}&gt;
    &lt;FormGroup&gt;
      &lt;Input type=&quot;text&quot; id=&quot;fullname&quot; name=&quot;fullname&quot; placeholder=&quot;Full Name&quot; value={this.state.input.name} onChange={this.handleChange}&gt;&lt;/Input&gt;
      &lt;div className=&quot;text-danger&quot;&gt;{this.state.errors.name}&lt;/div&gt;
    &lt;/FormGroup&gt;
    ....
  &lt;/Form&gt;
  </code></pre>
  <p>Thank you</p>