Restrict user to enter English only text input, no other language in react native

Question

I want user can enter his email id in English language only, User can't enter Japanese or chinese even if he has an option in his keyboard. I searched but I found some post which restrict user to enter special characters.

only allow English characters and numbers for text input

I have written this code.

_handleChange = (name, value) => {
    value = value.replace(/[^A-Za-z]/ig, '');

    const { data } = this.state;
    data[name] = value;
    this.setState(
      {
        data: JSON.parse(JSON.stringify(data))
      },
      () => {
        this._isValid(name)
      }
    );
  };

Please suggest.

Thank you.

Possible duplicate of https://stackoverflow.com/questions/7144167/only-allow-english-characters-and-numbers-for-text-input?noredirect=1&lq=1 — Jonathan Southern, Dec 22 '19 at 05:44
Does this answer your question? [only allow English characters and numbers for text input](https://stackoverflow.com/questions/7144167/only-allow-english-characters-and-numbers-for-text-input) — Jonathan Southern, Dec 22 '19 at 05:44
Thank you for replying but it gives me only letters and numbers but I want all characters and letters which are allowd in email — Chandni, Dec 22 '19 at 09:14
Why downvote - Can any one explain me that this allow me only allow English characters and numbers for text input but it is not allowing special characters, like '@', '.' Email id needs these characters. So can any one reply for it and remove downvote. Thank you — Chandni, Dec 24 '19 at 08:18

Mostafiz Rahman · Answer 1 · 2019-12-26T17:19:04.687

0

In Javascript code of the _handleChange function you can add following regex inside a conditional block while calling setState:

if(/\w[\w|.|-|+]+@[\w|-]+.[\w]{2,}/.test(emaiId))
  this.setState({emailId})

RegExp.prototype.test() will check the provided string against the regex and return boolean value.

edited Dec 26 '19 at 17:19

answered Dec 22 '19 at 07:15

Mostafiz Rahman

8,169
7
57
74

HI thank you for answer but it is not allowing me to enter any special characters like "@". it allows me only number and string. – Chandni Dec 24 '19 at 08:14
Sorry! My previous regex war wrong, updated with `\w[\w|.|-|+]+@[\w|-]+.[\w]{2,}`. This will allow checking most of the emails – Mostafiz Rahman Dec 26 '19 at 17:18
It is not allowing me to type any character in english. – Chandni Dec 28 '19 at 06:36
add this into the function handling the submit button. If you try to update on each keystroke the input string won't pass the regex as it's incomplete, do it when the taking input is finish. – Mostafiz Rahman Dec 28 '19 at 19:52
Ok I am checking it now. – Chandni Jan 07 '20 at 14:41

Restrict user to enter English only text input, no other language in react native

1 Answers1