title: Form validation before the submission and at time of the data entry
body: <p>I started to study React and wanted to create the form  for multiple inputs, where I can check the validation of the data at the time of input and again before submitting of the form.<br>
  The conditions to submit: all fields are mandatory and the data is valid.  </p>
  
  <p>Currently, if user enters invalid data in input field, error text is displayed near the same field. And if user clicked button "submit" on the form with empty fields, error text is also displayed.  </p>
  
  <p>But I can't really work it out, how should I do the validation before the submission of the form in my example: : the form has the input field with an error or not.</p>
  
  <pre><code>import React from 'react'
  import { render } from 'react-dom'
  
  const ErrorOutput = props =&gt; {
    let name = props.name
    let inputValue = props.case
    let submit = props.submit
    console.log(props.submit)
    if (name === 'firstName') {
      if (!inputValue.match(/^[a-zA-Z]+$/) &amp;&amp; inputValue.length &gt; 0) {
          return &lt;span&gt;Letters only&lt;/span&gt;
        } else if (submit &amp;&amp; inputValue.length === 0) {
          return &lt;span&gt;Required&lt;/span&gt;
        }
      return &lt;span&gt;&lt;/span&gt;
    }
    if (name === 'telNo') {
      if(!inputValue.match(/^[0-9]+$/) &amp;&amp; inputValue.length &gt; 0) {
          return &lt;span&gt;Numbers only&lt;/span&gt;
        } else if (submit &amp;&amp; inputValue.length === 0) {
          return &lt;span&gt;Required&lt;/span&gt;
        }
      return &lt;span&gt;&lt;/span&gt;
    }
  }
  
  class App extends React.Component {
    constructor(props){
      super(props)
  
      this.state = {
        firstName: '',
        telNo: '',
        submit: false
      }
    }
  
    handleSubmit(e){
      e.preventDefault()
      let submit = true
      this.setState ({submit: submit})
      // ... Validation
    }
  
    handleValidation(e) {    
      this.setState({
        [e.target.name]: e.target.value 
      })  
    }
  
    render() {
      return (
        &lt;form onSubmit={this.handleSubmit.bind(this)}&gt;
          &lt;div&gt;
            &lt;label&gt;
              First name:
            &lt;/label&gt;
            &lt;input
              type='text'
              name ='firstName'
              value = {this.state.firstName}
              onChange = {this.handleValidation.bind(this)}
            /&gt;
            &lt;ErrorOutput case={this.state.firstName} name={'firstName'} submit = {this.state.submit} /&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;label&gt;
              Phone number:
            &lt;/label&gt;
            &lt;input
              type='tel'
              name ='telNo'
              value = {this.state.telNo}
              onChange = {this.handleValidation.bind(this)}
            /&gt;
            &lt;ErrorOutput case={this.state.telNo} name={'telNo'} submit = {this.state.submit} /&gt;
          &lt;/div&gt;
          &lt;button&gt;
            Submit
          &lt;/button&gt; 
        &lt;/form&gt;
      )
    }
  }
  
  render(
    &lt;App /&gt;,
    document.getElementById('root')
  )
  </code></pre>