Textbox with alphanumeric check in javascript.

Question

I have a textbox and it need the user not allow to enter any specialcharecters He can enter

1. A-Z
2. a-z
3. 0-9
4. Space.

One more condition is the first letter should be alphabetic. How can I do a javascript verification on each keypress?

Answer 1

add a onKeyUp="javascript:checkChar(this);" to the input box.

function checkChar(tBox) {   

    var curVal = tBox.value;

    if ( /[^A-Za-z0-9 ]/.test(curVal) ) { 

        //do something because he fails input test.

    }

}

alernatively to check JUST the key that was pressed you can grab the keycode from the event like so:

onKeyUp="javascript:checkChar(event);"

function checkChar(e) {

    var key;


    if (e.keyCode) key = e.keyCode;
    else if (e.which) key = e.which;

    if (/[^A-Za-z0-9 ]/.test(String.fromCharCode(key))) {

        //fails test

    }

}

missed the part about first char, but you can do a test on the textbox value as in the first example:

/^[A-Za-z]/.test(curVal)

or even use the second method but pass the text box as well so you can get it's full value.

Answer 2

You should check pressed key in onkeydown event handler of the textbox and if it doesn't conform conditions then return false from the handler. Using keyup will not allow you to prevent char from being actually inputted in the textbox.

Answer 3

I don't think you should check on each keypress, it could be very annoying for the user.

Just check the input when it loses the focus, or when submiting.

To do it, you can use a regex and use this pattern:

 `/[a-z]{1}[a-z0-9]/i`

You can also take a look at the JQuery Validation Plugin

Answer 4

This function will check the string given to it for those criteria:

function checkvalue(value) {
  return value.match( /[A-Za-z][A-Za-z0-9 ]*/ );
}

You can then use that in an onkeypress event, passing in the current value.