title: How to have pattern and associated error messages in a list of dicts reactjs?
body: <p>I am new to reactjs...and trying to validate the input element for a particular pattern. I used the pattern attribute on input element to validate as below and it works. </p>
  
  <pre><code>validate = (event) =&gt; {
      let name = event.target.name;
      name = name.toLowerCase().replace(/\b[a-z]/g, (letter) =&gt; {
          return letter.toUpperCase();
      });
      if((event.target.value.length &gt; 0  &amp;&amp; this.state.has_focus) || 
      (event.target.value.length === 0 &amp;&amp; this.state.has_focus)){
          if (!event.target.validity.valid) {
              if (event.target.validity.patternMismatch) {
                  this.setState({is_valid: false});
                  this.setState({error: 'Enter ' + name + ' matching the 
                  pattern'});
              }
              if (event.target.validity.valueMissing) {
                  this.setState({is_valid: false});
                  this.setState({error: name + ' cannot be empty'});
              }
          }
          else {
              this.setState({is_valid: true});
          }
      }
  };
  input_change = (event) =&gt; {
      this.props.onChange(event);
      this.setState({text_input_value: event.target.value});
      this.validate(event);
  };
  
  &lt;Input name="name" placeholder="Type a name here" required value= 
  {this.state.name} onChange={this.input_change}
                              disabled={disabled}
                              pattern="^[a-z]$"/&gt;
  </code></pre>
  
  <p>Instead of this i would like to have pattern and its associated error messages in a list of dicts (to start with input length limiting to 10 characters being the pattern) and in the future can add more patterns. How can i go about with this. Thanks.</p>