title: Form validation: output of error message
body: <p>I created the following form with validation using React:  </p>
  
  <ul>
  <li>the data shall be validated at the time of input</li>
  <li>the data shall be validated again before submission</li>
  <li>all data all fields are mandatory and the data is valid</li>
  </ul>
  
  <p>This program works, but I have the following problem:<br>
  I monitor the data check with onBlur, but when the user enters invalid data in the first field along with the error message for the first field ("Only letters"), an error message is displayed for the second field ("This field is a required").</p>
  
  <p>How can I improve this my example to:</p>
  
  <ol>
  <li>at the time of input - an error message ('This field is required' or a particular message for an invalid data) was displayed only if the user touched a particular field</li>
  <li>if a button "Submit" was pressed - then error messages should be displayed near all fields with invalid data</li>
  </ol>
  
  <p>My code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const ErrorOutput = ({ error }) =&gt; &lt;span&gt;{error}&lt;/span&gt;
  
  class FormItem extends React.Component {
    render() {
      return (
        &lt;div&gt;
          &lt;label&gt;
            {this.props.label}
          &lt;/label&gt;
          &lt;input
            {...this.props.input}
          /&gt;
          {this.props.error &amp;&amp; &lt;ErrorOutput error={this.props.error} /&gt;}
        &lt;/div&gt;
      );
    }
  }
  
  class App extends React.Component {
    constructor(props){
      super(props)
  
      this.state = {
        firstName: '',
        telNo: '',
        submit: false,
        errors: {
          firstName: '',
          telNo: '',
        },
        invalid: false,
      }
    }
  
    handleSubmit(e){
      e.preventDefault()
      if (this.validate()) {
        console.log('Error!')
      } else {
        console.log('Success!')
      }
    }
  
    validate = () =&gt; {
      const { firstName, telNo } = this.state
      const errors = {}
      let invalid = false;
      if (firstName === '') {
        errors.firstName = 'first name is required'
        invalid = true;
      } else if (!firstName.match(/^[a-zA-Z]+$/)) {
        errors.firstName = 'Letters only'
        invalid = true;
      }  
      if (telNo === '') {
        errors.telNo = 'Phone is required'
        invalid = true;
      } else if (!telNo.match(/^[0-9]+$/)) {
        errors.telNo = 'Numbers only'
        invalid = true;
      }
      this.setState({
        invalid,
        errors,
      })
      
      return invalid;
    }
  
    render() {
      return (
        &lt;form onSubmit={this.handleSubmit.bind(this)}&gt;
          &lt;FormItem label='First name:' input={{
              type: 'text',
              name: 'firstName',
              value: this.state.firstName,
              onChange: e =&gt; this.setState({ firstName: e.target.value }),
              onBlur: () =&gt; this.validate(),
            }} error = {this.state.errors.firstName}
          /&gt;
          &lt;FormItem label='Phone number:' input={{
              type: 'tel',
              name: 'telNo',
              value: this.state.telNo,
              onChange: e =&gt; this.setState({ telNo: e.target.value }),
              onBlur: () =&gt; this.validate(),
            }} error = {this.state.errors.telNo}
          /&gt;
          &lt;button&gt;
            Submit
          &lt;/button&gt; 
        &lt;/form&gt;
      )
    }
  }
  
  ReactDOM.render(
    &lt;App /&gt;,
    document.getElementById('root')
  )</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"&gt;&lt;/script&gt;
  &lt;script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"&gt;&lt;/script&gt;
  &lt;body&gt;
  &lt;div id="root"&gt;&lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>