title: React - restrict to numeric/alphanumeric/hexadecimal symbols in text field with max length
body: <p>I'm working on <code>React.js</code> project.
  I wanna create 3 Text Fields where:</p>
  <p><strong>1st</strong> Text Field - I want to insert only hexadecimal values.
  It should accept the numbers from 0-9 &amp; letters from A-F &amp; colon.
  It should accept only 23 chars(numbers, letters from A-F &amp; colon).</p>
  <p><strong>2nd</strong> Text Field- It should only Hexadecimal values.</p>
  <p><strong>3rd</strong> Text Field- It should accept only Alpha Numeric values (only Numbers &amp;<br />
  letters).</p>
  <p><strong>4th</strong> Text Field- Only Letters.</p>
  <p>Note: Special Characters should not be accepted.</p>
  <p>Please help me out to solve this.</p>
  <p>Sample Code:</p>
  <pre><code>constructor(props) {
    super(props);this.state = {showModal: true};
    this.modalFooter = this.modalFooter.bind(this);
    this.modalBody = this.modalBody.bind(this); this.updateState = this.updateState.bind(this);     
  };
  
  modalFooter() {
    return (
      &lt;div&gt;
        &lt;BButton name=&quot;Cancel&quot; onClickHandler={() =&gt; { this.setState({ showModal: false }) }} /&gt;
      &lt;/div&gt;);
  }
  
  modalBody() {
    return (
      &lt;div&gt;
        &lt;br className=&quot;Class&quot;&gt;
          &lt;br&gt; Hex Value: &lt;input type=&quot;text&quot; className=&quot;Class&quot; formnovalidate=&quot;return isNumber(event)&quot;
            maxLength=&quot;23&quot; placeholder=&quot;&quot; /&gt;&lt;/br&gt;
          &lt;br&gt; Addr:  &lt;input type=&quot;text&quot; className=&quot;Class&quot; maxLength=&quot;6&quot; name=&quot;&quot;
            placeholder=&quot;&quot; /&gt;&lt;/br&gt;&lt;br&gt; Name: &lt;input type=&quot;text&quot; className=&quot;Class&quot; id=&quot;Number&quot;
              maxLength=&quot;64&quot;
              name=&quot;&quot; placeholder=&quot;&quot; /&gt;&lt;/br&gt;
        &lt;/br&gt;
      &lt;/div&gt;
    );
  }
  
  updateState(e) {
    this.setState({data: e.target.value});
  }
  
  render() {
    let body = this.modalBody();
    let footer = this.modalFooter();
    let modal = &lt;BModal header=&quot;Add Message&quot;
      body={body}
      footer={footer} /&gt;
    return (
      &lt;div className=&quot;page-title&quot;&gt;
        &lt;center&gt;
          &lt;h3&gt; Sample Program &lt;/h3&gt;
        &lt;/center&gt;
        &lt;hr className=&quot;horizontal-line&quot;&gt;&lt;/hr&gt;
  
        &lt;div&gt;  &lt;font color=&quot;grey&quot;&gt;&lt;input type=&quot;text&quot; value={this.state.data}
          onClick={() =&gt; { this.setState({ showModal: true }) }} /&gt;&lt;/font&gt;
          {this.state.showModal ? modal : &quot;&quot;}
        &lt;/div&gt;
      &lt;/div&gt;);
  
  }
  </code></pre>