title: input pattern='[a-zA-Z]' is not working in React application
body: <p>What I have been working on is a text <code>input</code> that narrows down <code>&lt;option&gt;</code> in a <code>&lt;select&gt;</code> as the user types. It is working, but my concern now is security, what a user passes into the <code>input</code>, and potential malicious entries.</p>
  
  <p>I figured I could do something like <code>&lt;input placeholder='[a-zA-Z]' /&gt;</code> but it is still allowing other characters to be entered into the text box.</p>
  
  <p>What am I doing wrong here, and what would be an alternative that would permit only alphanumeric being entered?</p>
  
  <pre><code>onInputChange(term) {
      this.setState({ term });
  }
  
  renderOptionsSelect(term) {
      return _.map(this.props.pos_list, p =&gt; {
          var searchTerm = this.state.term.toLowerCase();
          if (p.pos_code.toLowerCase().match(searchTerm)) {
              return (
                  &lt;option key={p.pos_code} value={p.pos_code}&gt;{p.pos_code}&lt;/option&gt;
              );                        
          }
      });
  }
  
  // render the main element of the container
  render() {
      return (
          &lt;div className='panel panel-default'&gt;
              &lt;div className='panel-heading'&gt;
                  &lt;h4&gt;&lt;strong&gt;Basic Query&lt;/strong&gt;&lt;/h4&gt;
              &lt;/div&gt;
  
              &lt;div className='panel-body'&gt;
                  &lt;input 
                      pattern='[a-zA-Z]'
                      className='form-control' 
                      placeholder='Enter Keyword or Position Code' 
                      value={this.state.term}
                      onChange={event =&gt; this.onInputChange(event.target.value)}
                  /&gt;
  
                  &lt;hr /&gt;
                  &lt;h4&gt;Position:&lt;/h4&gt;
                  &lt;select className='form-control'&gt;
                      &lt;option&gt;&lt;/option&gt;
                      {this.renderOptionsSelect()}
                  &lt;/select&gt;
                  &lt;br /&gt;
                  &lt;h4&gt;Data Cut:&lt;/h4&gt;
                  &lt;select className='form-control' disabled={true} /&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      ); 
  }
  </code></pre>