jquery - validate characters on keypress?

Question

I have a form text field that I want to allow only numbers and letters in. (i.e., no #$!, etc...) Is there a way to throw up an error and prevent the keypress from actually outputting anything if the user tries to use any character other than numbers and letters? I've been trying to find a plugin, but haven't really found anything that does this...

Answer 1

$('input').keyup(function() {
    var $th = $(this);
    $th.val( $th.val().replace(/[^a-zA-Z0-9]/g, function(str) { alert('You typed " ' + str + ' ".\n\nPlease use only letters and numbers.'); return ''; } ) );
});

---

EDIT:

There are some other good answers here that will prevent the input from taking place.

I've updated mine since you also wanted to show an error. The replace can take a function instead of a string. The function runs and returns a replacement value. I've added an alert to show the error.

http://jsfiddle.net/ntywf/2/

Answer 2

Well the patrick's answer removes character if it is wrong, to actually prevent character from being inserted into the field use

$("#field").keypress(function(e) {
    // Check if the value of the input is valid
    if (!valid)
        e.preventDefault();
});

This way the letter will not come to textarea

Answer 3

$('#yourfield').keydown(function(e) {
    // Check e.keyCode and return false if you want to block the entered character.
});

Answer 4

You could try this extension:

jQuery.fn.ForceAlphaNumericOnly =
function()
{
    return this.each(function()
    {
        $(this).keydown(function(e)
        {
            var key = e.charCode || e.keyCode || 0;
            // allow backspace, tab, delete, arrows, letters, numbers and keypad numbers ONLY
            return (
                key == 8 || 
                key == 9 ||
                key == 46 ||
                (key >= 37 && key <= 40) ||
                (key >= 48 && key <= 57) ||
                (key >= 65 && key <= 90) ||
                (key >= 96 && key <= 105));
        })
    })
};

Useage:

$("#yourInput").ForceAlphaNumericOnly();

Answer 5

I found that combining validation on keypress and keyup gives the best results. Key up is a must if you want to handle copy pasted text. It is also a catch all in case of cross browser issues which allow non numeric values into your textbox.

    $("#ZipCode").keypress(function (event) {

        var key = event.which || event.keyCode; //use event.which if it's truthy, and default to keyCode otherwise

        // Allow: backspace, delete, tab, and enter
        var controlKeys = [8, 9, 13];
        //for mozilla these are arrow keys
        if ($.browser.mozilla) controlKeys = controlKeys.concat([37, 38, 39, 40]);

        // Ctrl+ anything or one of the conttrolKeys is valid
        var isControlKey = event.ctrlKey || controlKeys.join(",").match(new RegExp(key));

        if (isControlKey) {return;}

        // stop current key press if it's not a number
        if (!(48 <= key && key <= 57)) {
            event.preventDefault();
            return;
        }
    });

$('#ZipCode').keyup(function () {
    //to allow decimals,use/[^0-9\.]/g 
    var regex = new RegExp(/[^0-9]/g);
    var containsNonNumeric = this.value.match(regex);
    if (containsNonNumeric)
        this.value = this.value.replace(regex, '');
});

Answer 6

The above jquery extension (ForceAlphaNumericOnly) is good but still allows the following characters through !@#$%^&*()

On my Mac, when you press the shift key (keycode 16) and then 1, it enters ! but the keycode is 49, the keycode for 1.