title: How to apply input validation in React Hooks
body: <p>I am new to ReactJS Hooks. I searched out for a clear controlled form validation example but didn't get one. So I decided to write a simple question that anyone can easily understand it.</p>
  
  <p>Assume I have a two input fields, type <code>number</code> and type <code>text</code></p>
  
  <pre><code>const [values, set_values] = useState({first_input:'',second_input:''});
  
  const handle_change = (e) =&gt; {
    let name = e.target.name
    let value = e.target.value;
    values[name] = value;
    set_values(values);
  }
  
  const test_validation () =&gt; {
    // I used to do it this way
    if(document.getElementsByName('first_input')[0].value==''){
      alert("first input is required")
    }
  }
  
  return(
    &lt;div&gt;
      &lt;input onChange={handle_change} name='first_input' type='number' /&gt;
      &lt;input onChange={handle_change} name='second_input' type='text' /&gt;
  
      &lt;input type='submit' onClick={test_validation} /&gt;
    &lt;div/&gt;
  )
  </code></pre>
  
  <p>Is it wrong to use pure JS to check the input's value and set conditions or is it preferred to use React validation forms?</p>
  
  <p>I tried to set <code>required</code> attribute on input element tag so it can't be skipped but didn't work.</p>
  
  <p>I need to <code>alert()</code> warning message for the required filed or <code>highlight</code> or <code>focus</code> on it.</p>