Input pattern = '[a-zA-Z]' does not work in a React application

Question

What I was working on is the input text, which narrows the <option> to <select> as the user types. It works, but now my concern is security, that the user goes to input and potential malicious entries.

I decided that I could do something like <input placeholder='[a-zA-Z]' /> , but still allows <input placeholder='[a-zA-Z]' /> to enter other characters in the text box.

What am I doing wrong here, and what would be an alternative that would allow only alphanumeric data to be entered?

 onInputChange(term) { this.setState({ term }); } renderOptionsSelect(term) { return _.map(this.props.pos_list, p => { var searchTerm = this.state.term.toLowerCase(); if (p.pos_code.toLowerCase().match(searchTerm)) { return ( <option key={p.pos_code} value={p.pos_code}>{p.pos_code}</option> ); } }); } // render the main element of the container render() { return ( <div className='panel panel-default'> <div className='panel-heading'> <h4><strong>Basic Query</strong></h4> </div> <div className='panel-body'> <input pattern='[a-zA-Z]' className='form-control' placeholder='Enter Keyword or Position Code' value={this.state.term} onChange={event => this.onInputChange(event.target.value)} /> <hr /> <h4>Position:</h4> <select className='form-control'> <option></option> {this.renderOptionsSelect()} </select> <br /> <h4>Data Cut:</h4> <select className='form-control' disabled={true} /> </div> </div> ); } 

Answer 1

It is easy. You:

• Remove the template attribute.
• Register your onInputChange method for input events instead of change events ( onInput={event => this.onInputChange(event.target.value)} ).
• Before changing the state, clear the obtained value in onInputChange .

Answer 2

Thus, you currently have the function of narrowing the <select> parameters as the user types, and now your problem is to increase security by limiting what the user can present as input.

The answer to this question is that it is not possible to provide input using client-side validation; this should be done with server side validation .

Client-side security checks can be easily circumvented. Login must be verified when it is received by the server to ensure that it is not malicious.