How to allow only English letters in input fields?

Question

So, this is my input field:

<input type={type} name={name} />

How can I allow only English letters?

This is the RegEx, I believe I should use: /[A-Za-z]/ig

https://regex101.com/r/upWFNy/1

I am assuming that onChange() event should be used for this with the combination of setState() and event.target.value.

Thanks.

PS. I need to have this WHILE typing.

It is already outlined here: https://stackoverflow.com/questions/7144167/only-allow-english-characters-and-numbers-for-text-input — Kevin Lewis, Sep 05 '18 at 14:20
@KevinLewis, hi. Can you update your answer, but only for English, no numbers please? Thanks. — , Sep 05 '18 at 14:21
English is an interesting language because it uses many letters are that aren't in its "alphabet". So, are you sure you want this? If so, perhaps you should restate it as upper and lowercase [Basic Latin](http://www.unicode.org/charts/nameslist/index.html) letters. — Tom Blodget, Sep 05 '18 at 16:33
Note: You can't tell a web browser what characters to allow or not allow. But you can use JavaScript or HTML patterns that are triggered upon various events to remove unwanted characters. This is what you'll see in the answers. — Tom Blodget, Sep 05 '18 at 16:37

score 15 · Accepted Answer · answered Sep 05 '18 at 14:27

15

I would try this onChange function:

onChange={(e) => {
  let value = e.target.value

  value = value.replace(/[^A-Za-z]/ig, '')

  this.setState({
    value,
  })
}}

See the codepen: https://codepen.io/bozdoz/pen/vzJgQB

The idea is to reverse your regex matcher with ^ and replace all non-A-z characters with ''

answered Sep 05 '18 at 14:27

bozdoz

12,550
7
67
96

Yes.. but for me the issue is that `value` is always empty. It fills dynamically as I enter the text. That's why it fails at `value={this.state.value}` @bozdoz – Sep 06 '18 at 08:19
For jQuery, use `$(this).val($(this).val().replace(/[^A-Za-z]/ig, ''))` – George Ogden Oct 15 '20 at 13:50

score 7 · Answer 2 · answered Sep 05 '18 at 14:14

7

You can use the pattern attribute in your input.

    <input pattern = “[A-Za-z]”>

answered Sep 05 '18 at 14:14

Kevin Lewis

231
1
8

score 4 · Answer 3 · answered Aug 17 '21 at 04:00

You can try to use the Regx to solve this issue. Just check the character that entered is an alphabet using regx. If not then don't update the state value.

import React from "react";

class InputValidationDemo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      type: "text",
      name: "username",
      value: ""
    };
  }
  onChange = (e) => {
    const re = /^[A-Za-z]+$/;
    if (e.target.value === "" || re.test(e.target.value))
      this.setState({ value: e.target.value });
  };

  render() {
    const { type, name, value } = this.state;
    return (
      <div>
        <input type={type} name={name} value={value} onChange={this.onChange} />
      </div>
    );
  }
}
export default InputValidationDemo;

https://codesandbox.io/s/react-input-only-letters-qyf2j

The important part is the regular expression. You can change your validation type by changing the regex.

Harry Chilinguerian · Answer 4 · 2018-09-05T15:56:21.533

3

This should do the trick, all characters except ascii 0-127 which are English characters should be excluded, o through 127 also gives you space, +, -, / and punctuation which is useful, if you want only letters then [^A-z] should do the trick, if you need non-space characters then [^A-z\s] should work:

document.getElementById('english').addEventListener('input', function(){
  this.value = this.value.replace(/[^\x00-\x7F]+/ig, '');
});

React Way:

class InputEnglish extends React.Component {
  constructor(){
    super();
    this.state = {value: ''};
    this.onChange = this.onChange.bind(this);
  }
  onChange(e) {
    let val = e.target.value.replace(/[^\x00-\x7F]/ig, '');
    this.setState(state => ({ value: val }));
  }
  render() {
    return (<input 
        value={this.state.value}
        onChange={this.onChange}
    />);
  }
}

https://codepen.io/anon/pen/QVMgrd

edited Sep 05 '18 at 15:56

answered Sep 05 '18 at 14:26

Harry Chilinguerian

563
3
9

Hi, can you write this in React way please? – Sep 05 '18 at 14:27
@JohnSam don't do much in React but this should work. – Harry Chilinguerian Sep 05 '18 at 15:08
@JohnSam take a look at the codepen in the post it works in there. If it's still not working let me know. : ) – Harry Chilinguerian Sep 05 '18 at 15:57
Yes.. but for me the issue is that `value` is always empty. It fills dynamically as I enter the text. That's why it fails at fetching the `value`. – Sep 06 '18 at 08:20

Tom O. · Answer 5 · 2020-09-28T14:00:41.520

2

You could use /[A-Za-z]/ regular expression and an input event handler which is fired every time the value of the element changes. Something like below:

const regex = /[A-Za-z]/;
function validate(e) {
  const chars = e.target.value.split('');
  const char = chars.pop();
  if (!regex.test(char)) {
    e.target.value = chars.join('');
    console.log(`${char} is not a valid character.`);
  }
}
document.querySelector('#myInput').addEventListener('input', validate);

<label for="myInput">Type some text:</label>
<input id="myInput" type="text" />

edited Sep 28 '20 at 14:00

answered Sep 05 '18 at 14:38

Tom O.

5,730
2
21
35

This won't work if I type, paste or drop invalid characters in the middle of the input. Check this out: https://stackoverflow.com/questions/51065370/how-to-enable-input-for-additional-keys/64085268#64085268 – Danziger Sep 27 '20 at 17:10
@Danziger I tried pasting a non-letter character example on Chrome v 85 and it seems to work as I expect. Do you have an example of this not working in a specific browser? – Tom O. Sep 28 '20 at 14:00
It works fine if you paste it at the end. Try moving the cursor to the left and pasting it there. I'm on Chrome 85 as well. – Danziger Sep 28 '20 at 15:25

score 0 · Answer 6 · answered Apr 07 '21 at 10:06

  alphacheck(e: any) {
    const regex = /[A-Za-z]/;
    const chars = e.target.value.split('');
    const char = chars.pop();
    console.log(char);
    if (!regex.test(char)) {
      e.target.value = chars.join('');
      alert("Please enter only alphabets");
      e.preventDefault();
      return false;
     
    }
    else {
      return true;
    }
  }


<input placeholder="Full Name" formControlName="fullName"  pattern="[a-zA-Z]*"  (keypress)="alphacheck($event)"  name="fullname" value="" type="text" class="form-control">

Please provide some explanation with your answer. – Lexib0y Apr 07 '21 at 10:53 — Lexib0y, Apr 07 '21 at 10:53

score 0 · Answer 7 · answered Jan 01 '23 at 18:32

0

const regex = /[A-Za-z]/;
function validate(e) {
  const chars = e.target.value.split('');
  const char = chars.pop();
  if (!regex.test(char)) {
    e.target.value = chars.join('');
    console.log(`${char} is not a valid character.`);
  }
}
document.querySelector('#myInput').addEventListener('input', validate);

<label for="myInput">Type some text:</label>
<input id="myInput" type="text" />

answered Jan 01 '23 at 18:32

Rajesh Kumar

1

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 01 '23 at 22:20

How to allow only English letters in input fields?

7 Answers7

Linked

Related