React - restrict to numeric/alphanumeric/hexadecimal symbols in text field with max length
<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>