title: Validate form in React js
body: <p>I'm trying to validate form <em>onSubmit</em> in my React Application.</p>
  <p>This is one of the components which is rendered in main file. This components is called by click on <strong>set alarm</strong> button. This is not that important ,but what is ,I'm sending <strong>getInfo()</strong> function from main component to this component as a prop. I need to call this function when validation returns <strong>true</strong></p>
  <p>Form consists of 3 input fields and one button ,but I don't need to check the first one.</p>
  <p>Since my application is Alarm clock ,and this form pops up when you click <strong>Set alarm</strong> button , I need to check if</p>
  <ul>
  <li>First input is not empty and if it's value is not over 24 (in this input you set hours for alarm)</li>
  <li>Second input is not empty and if it's value is not over 60 (in this input you set minutes for alarm)</li>
  </ul>
  <p>My idea was to create <strong>States</strong> for these values and create functions which are supposed to update states. Functions are called <strong>onChange</strong> that specific input.</p>
  <pre><code>const [validate,setValidate] = useState({
      message:'',
      hours:'',
      minutes:''
  }) 
  
  function updateHours(e){
      let value = e.target.value
      setValidate(prevState =&gt; ({
          ...prevState,
         hours:value
      }))
  }
  
  function updateMinutes(e){
      let value = e.target.value;
      setValidate(prevState =&gt; ({
          ...prevState,
          minutes:value
      }))
  }
  </code></pre>
  <p>To this point everything works fine. Then I've tried to create new function which will be validating these values and should return the result. This function will be called <strong>onSubmit</strong> ,and if returns true ,it means everything is okay and form will be send.</p>
  <pre><code>let getInfo = props.getInfo;
  
  function validateForm(){
      if(validate.hours &gt; 24){
          alert('enter correct hours !')
          return false;
      }
  
      if(validate.minutes &gt; 60){
          alert('enter correct minutes !')
          return false;
      }
  
      return getInfo;
  }
  </code></pre>
  <p>I've tried to Google it how to do this onSubmit and all I can find was this approach ,which did not work. It behaves like no function is called.</p>
  <pre><code>&lt;form onSubmit=&quot;return validateForm&quot;&gt;
       &lt;FontAwesomeIcon 
          icon={faTimesCircle} 
          className=&quot;closeIcon&quot;
          onClick={() =&gt; setAlarm(false)} /&gt;
  
       &lt;h3&gt;Please set your alarm&lt;/h3&gt;
  
       &lt;label htmlFor=&quot;text&quot;&gt;Message&lt;/label&gt;
       &lt;input type=&quot;text&quot; id=&quot;text&quot; autoComplete=&quot;off&quot; autoFocus=&quot;on&quot; /&gt;
  
       &lt;div className=&quot;flex&quot;&gt;
         &lt;div className=&quot;inputNumber&quot;&gt;
            &lt;label htmlFor=&quot;hours&quot;&gt;Hour&lt;/label&gt;
            &lt;input type=&quot;number&quot; id=&quot;hours&quot; name=&quot;hours&quot; onChange={updateHours} /&gt;
         &lt;/div&gt;
                                  
         &lt;div className=&quot;inputNumber&quot;&gt;
            &lt;label htmlFor=&quot;minutes&quot;&gt;Minute&lt;/label&gt;
            &lt;input type=&quot;number&quot; id=&quot;minutes&quot; name=&quot;minutes&quot; onChange={updateMinutes} /&gt;
         &lt;/div&gt;
      &lt;/div&gt;
      &lt;button onClick={()=&gt;setAlarm(false)}&gt;SET ALARM&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  <p>Has anyone encountered this kind of problem or can you give me advice what to do with it? Also I'm open-minded to some better approach for this. Thank you.</p>