title: How to disable submit button until form is filled and valid in javascript?
body: <p>I created a <code>Contact Us</code> form and the submit button is disabled. The submit button is only enabled if all fields are filled and the entries are valid.</p>
  <p>Currently, my issue is after I entered all the fields with valid entries, the button still not show up. However, after entering in all the fields with valid input and I click on the <code>name</code> or <code>email</code> input box and type a character at the end, then the <code>submit</code> button becomes active. I think there is some async issue with my <code>checkValidation</code> function and I am not sure how to fix it.</p>
  <p><a href="https://i.stack.imgur.com/CJ5yU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CJ5yU.png" alt="enter image description here" /></a></p>
  <pre><code>import React, { Component } from 'react'
  import axios from 'axios'
  import '../css/ContactUs.css';
  
  class ContactUs extends Component {
      constructor(props) {
          super(props)
      
          this.state = {
               name: '',
               email: '',
               birthDate: '',
               emailConsent: false,
               disableSubmitButton: true
          }
      }
  
      changeHandler = e =&gt; {
          const nameSelect = e.target.name
          const value = e.target.type === 'checkbox' ? e.target.checked : e.target.value;
          this.setState({
              [nameSelect]: value
          })
          this.checkValidation()
      }
  
      checkValidation = e =&gt; {
          
          const { name, email, birthDate, emailConsent, disableSubmitButton } = this.state
          const validCharacters = /^[a-zA-Z ]+$/
          const validEmail = /^(([^&lt;&gt;()[\]\\.,;:\s@&quot;]+(\.[^&lt;&gt;()[\]\\.,;:\s@&quot;]+)*)|(&quot;.+&quot;))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
          const today = new Date();
          const birthdate = new Date(birthDate);
          if (
              !(name.length === 0) &amp;&amp;
              name.match(validCharacters) &amp;&amp;
              !(email.length === 0) &amp;&amp;
              validEmail.test(email) &amp;&amp;
              emailConsent === true &amp;&amp;
              birthdate &lt; today
          ) {
              this.setState({
              disableSubmitButton: false
          }, () =&gt; console.log('passed'))}
      }
  
      clearHandler = e =&gt; {
          this.setState({
               name: '',
               email: '',
               birthDate: '',
               emailConsent: false
          })
          console.log('clicked clear')
      }
  
      handleSubmit = e =&gt; {
          const { name, email, birthDate, emailConsent } = this.state
          e.preventDefault()
          console.log(this.state);
          axios.post('https://my-json-server.typicode.com/xxxxx/users', {name : name, email: email, birthDate: birthDate, emailConsent: emailConsent })
          .then(response =&gt; {
              console.log(response)
          })
          .catch(error =&gt; {
              console.log(error)
          })
      }
  
      render() {
          const { name, email, birthDate, emailConsent, disableSubmitButton } = this.state
          
          return (
              &lt;div className=&quot;container&quot;&gt;
                  &lt;h1&gt;Contact Us&lt;/h1&gt;
                  &lt;form onSubmit={this.handleSubmit}&gt;
                      &lt;label&gt;
                          Name
                          &lt;input 
                              className=&quot;text&quot;
                              name=&quot;name&quot;
                              type=&quot;text&quot;
                              value={name}
                              onChange={this.changeHandler}
                          /&gt;
                      &lt;/label&gt;
                      &lt;label&gt;
                          Email
                          &lt;input 
                              className=&quot;text&quot;
                              name=&quot;email&quot;
                              type=&quot;email&quot;
                              value={email}
                              onChange={this.changeHandler}
                          /&gt;
                      &lt;/label&gt;
                      &lt;label&gt;
                          Birth Date
                          &lt;input 
                              className=&quot;text&quot;
                              name=&quot;birthDate&quot;
                              type=&quot;date&quot;
                              value={birthDate}
                              onChange={this.changeHandler}
                          /&gt;
                      &lt;/label&gt;
                      &lt;label className=&quot;checkbox&quot;&gt;
                          &lt;input 
                              
                              name=&quot;emailConsent&quot;
                              type=&quot;checkbox&quot;
                              checked={emailConsent}
                              onChange={this.changeHandler}
                          /&gt;
                          I agree to be contact via email.
                      &lt;/label&gt;
                      &lt;div className=&quot;float-right&quot;&gt;
                          &lt;button className=&quot;clear&quot; type=&quot;button&quot; onClick={this.clearHandler}&gt;Clear&lt;/button&gt;
                          &lt;input disabled={disableSubmitButton} className={disableSubmitButton ? 'submit-inactive' : 'submit'} type=&quot;submit&quot; value=&quot;Submit&quot;&gt;&lt;/input&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default ContactUs
  
  </code></pre>