Checking regex expression on keypress

Question

I would like to create my own plugin (without use any external libraries - it's for learning purpose) to validate text typed by user dynamically in regex test function.

In example I have regex pattern:

^.{2}$

And javascript function

$('#textbox').bind("keypress", function (event) {
    var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
    if (!regex.test(key)) {
        event.preventDefault();
        return false;
    }
});

Now, I want to type two dots into textbox, but after first keypress is fired, one dot doesn't match to the pattern and nothing happens because event is prevented.

My question: Is it possible to check if currently typed text matches with regex pattern?

Assuming you mean that you want to test the current value of the input, not just the last character typed, you can use `$(this).val()` or `this.value` to retrieve it. — Rory McCrossan, Aug 06 '15 at 10:07
`onkeyup()` event is what you're looking for ? --> http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onkeyup — Baldráni, Aug 06 '15 at 10:07
@RoryMcCrossan Yes you're right but this still doesn't changing the fact, that first typed dot doesn't matches to regex AFTER it's typed. — Adam Mrozek, Aug 06 '15 at 10:10

score 5 · Answer 1 · edited May 23 '17 at 12:23

5

Your regex only accept two dots (..), but you're testing a single character!

var regex = new RegExp("^.{2}$");

$('#textbox').bind("keypress", function (event) {
    var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
    if (!regex.test(key)) {
        event.preventDefault();
        return false;
    }
});

Wanna check current typed text when users finished typing? .. Look HERE

edited May 23 '17 at 12:23

Community

1
1

answered Aug 06 '15 at 10:26

Fest7

306
2
6

Yes I test single character but this is my point, how I need to check this fragment of regex after key is pressed? – Adam Mrozek Aug 06 '15 at 10:30

score 1 · Answer 2 · answered Jan 17 '19 at 12:39

1

var alpha = /[ A-Za-z]/;
var numeric = /[0-9]/; 
var alphanumeric = /[ A-Za-z0-9]/;

function validateKeypress(validChars) {
    var keyChar = String.fromCharCode(event.which || event.keyCode);
    return validChars.test(keyChar) ? keyChar : false;
}

The HTML will have to change to onkeypress="validateKeypress(alpha);"

answered Jan 17 '19 at 12:39

Tamilselvan K

1,133
11
10

It works fine, but returning FALSE still allows the character to be placed in the Input. you should return it like this: onkeypress="RETURN validateKeypress(alpha);" – Lenin Zapata Apr 27 '23 at 14:52

score 0 · Answer 3 · answered Aug 06 '15 at 10:24

0

You can try keydown as it will trigger as soon as you press a key and before character is displayed in textbox. So if it doesnot match with the pattern you can return out.

answered Aug 06 '15 at 10:24

Akshay

530
7
20

score 0 · Answer 4 · answered Aug 06 '15 at 10:27

0

$('#textbox').bind("keyup", function (event) {
    var user_input = getElementById ("your_input_id_here");
    if (!regex.test(user_input)) {
        return false;
    }
});

So, essentially you should use onkeyup instead and you should check the whole user input, not just the last key

answered Aug 06 '15 at 10:27

onerror

606
5
20

After first keyup event textbox value will be '.' and it doesn't matches the regex at all just like other answers. Keypress or keydown is irrelevant here. – Adam Mrozek Aug 06 '15 at 10:32
So, your user presses ., then the value of the input is cleared, and then you should check whether he pressed . one more time? Then I think you should save the state of '.' being already pressed once somewhere – onerror Aug 06 '15 at 10:40

Harshad Khandagale · Answer 5 · 2019-04-12T18:25:43.710

var in_put = document.getElementById("in_put"),
key = null;

in_put.addEventListener("keydown", match_input);

function match_input(e){

    console.log("Key: "+e.key);
    key = e.key;
    console.log("Match: "+key.match(/a/i));//return array of match
    if(key.match(/a/i)){

        //code on succession.
    }else{

        //code on failure.
    }
}

Note: Change /a/i with your /pattern/ig. It only check for input is a/A.

Checking regex expression on keypress

5 Answers5