How to prevent invalid characters from being typed into input fields

To prevent it from being set in the first place, you can return false on the keydown event handler, thus preventing the event from propagating any further.

I wrote the example below using jQuery, but you can use the same function when binding traditionally.

Though it's important to validate on the server-side as well, client-side validation is important for the sake of user friendliness.

$("input.number-only").bind({
    keydown: function(e) {
        if (e.shiftKey === true ) {
            if (e.which == 9) {
                return true;
            }
            return false;
        }
        if (e.which > 57) {
            return false;
        }
        if (e.which==32) {
            return false;
        }
        return true;
    }
});

The above code does it says- allows ONLY numbers. You can modify it by adding exception to say BACKSPACE for example like this 

<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script>
            function keyispressed(e){
                var charValue= String.fromCharCode(e.keyCode);
                if((isNaN(charValue)) && (e.which != 8 )){ // BSP KB code is 8
                    e.preventDefault();
                }
                return true;
            }
        </script>
    </head>    
    <body>
        <input type="text" onkeydown="return keyispressed(event);"/>
    </body>
</html>

Tags:

Javascript

Regex

Dom Events

Recent Posts