Accept only numbers and letters code not working in JavaScript

Question

I'm trying to prevent user from entering anything except numbers and letters, but my code doesn't even allow them itself. What could be the reason? Here's my code snippet:

$(document).ready(function(){
    $("#txtuname").keypress(function(e){ 
        var validExp = /^[0-9a-z]+$/gi;
        var val = $(this).val();
        if(val.match(validExp))
        {
            $("#errmsg").html("");
            return true;
        }
        else
        {
            $("#errmsg").html("Number and letters Only"); 
            return false;
        }
    });
});


<input type="text" name="txtuname" id="txtuname" />
<span id="errmsg"></span>

JSFiddle

It would be good idea to debug code and [edit] post with values you getting... — Alexei Levenkov, Sep 10 '16 at 03:16
@Nasir: No, not every versions of all top ranking browsers support it. — Sachin, Sep 10 '16 at 03:18
@AlexeiLevenkov: Can't you see the demo at JSFiddle. It will show you what I'm seeing exactly on my local? — Sachin, Sep 10 '16 at 03:19
Essentially you are saying "I'm too lazy to provide useful information in the post - deal with it" - this is not be the best way to take care of posts. — Alexei Levenkov, Sep 10 '16 at 03:32
@AlexeiLevenkov: why are you so angry with me? Those are your own words. I merely said see the demo. — Sachin, Sep 10 '16 at 04:23
@user5307298 Should paste of characters which are not 0-9a-z be allowed at element? — guest271314, Sep 10 '16 at 05:00

score 1 · Answer 1 · answered Sep 10 '16 at 03:24

1

You can use keyup not keypress

$(document).ready(function(){
 $("#txtuname").keyup(function(e){ 
  var validExp = /^[0-9a-z]+$/gi;
  var val = $(this).val();
  if(val.match(validExp))
  {
   $("#errmsg").html("");
   return true;
  }
  else
  {
   $("#errmsg").html("Number and letters Only"); 
   return false;
  }
 });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

<input type="text" name="txtuname" id="txtuname" />
<span id="errmsg"></span>

answered Sep 10 '16 at 03:24

Ying Yi

784
4
16

The forbidden characters still show up in the input box despite the warning. So you will want to use `keydown`, instead of `keyup` – davidhu Sep 10 '16 at 03:30
Your solution is buggy as well whether you do use keyup or keydown; doesn't really matter. – Sachin Sep 10 '16 at 04:32

guest271314 · Answer 2 · 2016-09-10T03:55:40.920

You can substitute input event for keypress event; adjust RegExp to /[0-9a-z]/i, use .split() with parameter "", Array.prototype.every(), RegExp.prototype.test() to check each character of input value at if condition; if each character is a digit or a letter condition is true, else false replace invalid characters of value using .replace() with RegExp /[^0-9a-z]/ig

$(document).ready(function() {
      var validExp = /[0-9a-z]/i;
      $("#txtuname").on("input", function(e) {
        var val = this.value;
        var check = val.split("").every(function(value) {
          return validExp.test(value)
        });
        if (check) {
          $("#errmsg").html("");
          return check;
        } else {
          this.value = val.replace(/[^0-9a-z]/ig, "");
          $("#errmsg").html("Number and letters Only");
          return false;
        }
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<input type="text" name="txtuname" id="txtuname" />
<span id="errmsg"></span>

You may want to highlight actual answer (`keyup`) as well as mention `paste` as suggested in http://stackoverflow.com/a/35592412/477420 — Alexei Levenkov, Sep 10 '16 at 03:35
@AlexeiLevenkov See updated post. `input` event handles paste of characters at `` element — guest271314, Sep 10 '16 at 03:39
@AlexeiLevenkov Re-read Question. Must have missed that characters should be removed from input. Added call to `.replace()` to replace characters which are not a-z0-9 — guest271314, Sep 10 '16 at 03:57

score 1 · Accepted Answer · answered Sep 10 '16 at 03:40

1

$(document).ready(function () {

        $("#txtuname").keypress(function (e) {

            var validExp = /^[0-9a-z]+$/gi;

            if (validExp.test(e.key)) {
                $("#errmsg").html("");
                return true;
            }
            else {
                $("#errmsg").html("Number and letters Only");

                return false;
            }
        });
    });

answered Sep 10 '16 at 03:40

Bhavdip Tala

51
3

This guy has come up with most efficient answer. It's simple and main thing it does work. – Sachin Sep 10 '16 at 04:42

score 0 · Answer 4 · edited May 23 '17 at 12:15

This is because keypress events are fired before the new character is added to the value of the element (so the first keypress event is fired before the first character is added, while the value is still empty). You should use keyup instead, which is fired after the character has been added reference.

Here is the code

html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

<input type="text" name="txtuname" id="txtuname" />
<span id="errmsg"></span>

js

$(document).ready(function(){
    $("#txtuname").keyup(function(e){ 
        var validExp = /^[0-9a-z]+$/gi;
        var val = $(this).val();
        if(val.match(validExp))
        {
            $("#errmsg").html("");
            return true;
        }
        else
        {
            $("#errmsg").html("Number and letters Only"); 
            return false;
        }
    });
});

Doesn't work. I already commented on this in other people's solutions. — Sachin, Sep 10 '16 at 04:35

score 0 · Answer 5 · answered Sep 10 '16 at 03:26

You issue is you are not getting the value of the key that is being pressed. If you set the val variable like so, it will work as expected.

var val = String.fromCharCode(e.keyCode)

This gets the ASCII code of the key pressed, and then converting to the letter or number it represents. Then you can check against your regex.

score 0 · Answer 6 · edited May 23 '17 at 12:08

$(document).ready(function(){
    $("#txtuname").keyup(function(e){ 
        var validExp = /^[0-9a-z]+$/gi;
        var val = $(this).val();
        if(validExp.test(val))
        {
            $("#errmsg").html("");
            return true;
        }
        else
        {
            // fix the value of input field here 
            $(this).val("");
            $("#errmsg").html("Number and letters Only"); 
            return false;
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="txtuname" id="txtuname" />
<span id="errmsg"></span>

You need to use keyup so that the character is "added" already to the value if you're going to use this given technique.
Since String.prototype.match actually returns an array of the match, it won't work in the way you want it to. Not to mention that it is much more expensive than RegEx.prototype.test.

Bonus

You can use the technique of finding carret position in an input field shown in Get cursor position (in characters) within a text Input field

To actually fix the input field on keyup.

Accept only numbers and letters code not working in JavaScript

6 Answers6

Bonus