ReactJS - Cannot restrict user input to letters only

Question

I'm trying to restrict user input to letters only but for some reason it's not working. I'm very new to ReactJS so maybe my problem lies here somewhere. This is what I've got so far:

return (
    <input type="text" pattern="[a-zA-Z]*" placeholder="Add Skill" onChange={this.updateField} />
)

type="text" and pattern seem not to work in this case.

Thanks in advance!

Jee Mok · Accepted Answer · 2023-03-28T01:13:35.210

9

The pattern attribute is used to check against the input value when it is submitting.

Ref: https://www.w3schools.com/tags/att_input_pattern.asp

To restrict users to input only letters, you can use the onKeyPress

<input
    type="text"
    onKeyPress={event => (event.charCode >= 65 && event.charCode <= 90) || (event.charCode >= 97 && event.charCode <= 122)}
    placeholder="Add Skill"
    onChange={this.updateField}
/>

This is the ASCII table: http://www.asciitable.com/

UPDATE 1

Codepen: https://codepen.io/jeemok/pen/rqJaog

UPDATE 2: `charCode` is deprecated

key return the typed character, so we may check if converting the key to number returns NaN:

onKeyPress(event) {
  return (isNaN(Number(event.key));
}

edited Mar 28 '23 at 01:13

answered Oct 17 '18 at 02:20

Jee Mok

6,157
8
47
80

It doesn't work if there are several input fields and one submit button for them all for some reason. – Anna Stierlitz Oct 17 '18 at 02:49
@AnnaStierlitz I've added a codepen for it. Can you also share the code of `updateField` method? – Jee Mok Oct 17 '18 at 02:53
Updated with React Codepen – Jee Mok Oct 17 '18 at 03:00
updateField(event) { const name = event.target.name; const value = event.target.value; this.setState({ [name]: value }); – Anna Stierlitz Oct 17 '18 at 05:16
@AnnaStierlitz I have updated the code in the CodePen and it is working still.. can you create one CodePen and reproduce the issue? – Jee Mok Oct 17 '18 at 06:21
1

`charCode` is deprecated in 2023. Can you help us with an updated solution, please? – KYin Mar 27 '23 at 16:46

score 0 · Answer 2 · answered Aug 16 '21 at 17:22

0

You can use Yup/Joi or other validator if you are going to use them several times and have more things to validate for that task as the regex are already there and tested. https://www.npmjs.com/package/yup https://www.npmjs.com/package/joi

answered Aug 16 '21 at 17:22

Yuen Steven

19
2

Hey, can you add a Codepen sample where you solve the problem using yup/joi - that would be helpful! – ypahalajani Aug 16 '21 at 20:08
https://react-hook-form.com/get-started#SchemaValidation – Yuen Steven Aug 17 '21 at 00:22

ReactJS - Cannot restrict user input to letters only

2 Answers2

UPDATE 1

UPDATE 2: charCode is deprecated

UPDATE 2: `charCode` is deprecated