Allow only English letters without spaces or number?

Question

I need to make my input text just accept English letter without spaces or number or can copy and paste in it!

I have tried this code and it works but when I copy and paste anything outside input it accept the value:

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('');
    }
}

document.querySelector('#inputTextBox').addEventListener('input', validate);

How can I make it not allow to copy and paste value out of input?

feel free to use Jquery or pure JS

well your code is only looking at the last letter. It would also fail if the user moved the cursor to a different spot in the textbox and typed. — epascarello, Jul 20 '20 at 13:48
This was closed as a dupe of a question and answer both specifically dealing with the React library. Since this question has nothing to do with React it should be reopened unless there is a more appropriate dupe out there... — Eaten by a Grue, Jul 28 '20 at 04:20

Eaten by a Grue · Accepted Answer · 2020-07-20T14:23:24.680

3

You can use oninput event with replace to restrict input like this:

<input type="text" oninput="this.value=this.value.replace(/[^a-z]/gi,'')">

edited Jul 20 '20 at 14:23

answered Jul 20 '20 at 14:17

Eaten by a Grue

19,208
10
77
99

HARDY8118 · Answer 2 · 2020-07-21T05:14:08.887

0

You need to look at paste event.

So in order to prevent user from pasting anything which is not allowed

document.querySelector('#inputTextBox').addEventListener('paste', validate);

You may reset the value of input after validating.

edited Jul 21 '20 at 05:14

answered Jul 20 '20 at 14:03

HARDY8118

462
4
14

input handles paste. Issue was pointed out in comments, not sure what copy has to do with it. – epascarello Jul 20 '20 at 14:07

score 0 · Answer 3 · answered Jul 20 '20 at 14:04

0

The loop is not really necessary, you can use match

function validate(e) {
    e.target.value = e.target.value.match(/[A-Za-z]/g).join('');
}

document.querySelector('#inputTextBox').addEventListener('input', validate);

<input id="inputTextBox"/>

answered Jul 20 '20 at 14:04

Greedo

3,211
1
11
27

Cool but when I'm trying to write with another language is accept and I said just english – Jul 20 '20 at 14:07
1

Paste `ååååååååååååå` into the textbox with no value, you get error – epascarello Jul 20 '20 at 14:10
all the solution will allow this, you should check against an english dictionary. Also, `å` is not in `A-Za-z` regex – Greedo Jul 20 '20 at 14:10
you are also reinventing replace() – epascarello Jul 20 '20 at 14:11

score -1 · Answer 4 · answered Jul 20 '20 at 13:59

-1

Your solution is only looking at one character.

It looks like you just want to filter out any characters that don't meet the criteria. In that case you can use the array filter method like so:

const regex = /[A-Za-z]/;

function validate(e) {
    const chars = e.target.value.split('');
    e.target.value = chars.filter(function(char) {
        return regex.test(char);
    }).join('');
}

document.querySelector('#inputTextBox').addEventListener('input', validate);

answered Jul 20 '20 at 13:59

Jack A.

3,768
1
20
27

1

why reinvent a simple reg exp? – epascarello Jul 20 '20 at 14:00
@epascarello Not sure what you mean. Are you referring to the regex `replace` solution linked in one of the comments? There are many ways to solve any given problem. This isn't necessarily the "best" solution, but the core problem with the original solution was one vs. many, and this solution shows how to address that. – Jack A. Jul 20 '20 at 15:05

Allow only English letters without spaces or number?

4 Answers4