Validate at client to accept only numbers in a textbox using JavaScript

← PrevNext →

Client side validations become very important when submitting data on a web page. Here is a practical scenario. We have an input box and it must accept only numbers, and it should not allow other characters as input. Here, in this post I'll show you an example on how to enter only numbers or allow only numbers with a decimal in a textbox using JavaScript.

Since, JavaScript is a medium to validate user entered values, we need a function that will check for the entered values in a Numeric Only Field.

Related: Enter Only Number using jQuery (A Cross Browser solution)

The Markup and the Script
    <title>Check if Entered value is Number using JavaScript</title>
        Enter only numbers with a Decimal value: 
        <input type="text" id="tbNumbers" value=""
            onkeypress="javascript:return isNumber(event)" />

    function isNumber(evt) {
        var iKeyCode = (evt.which) ? evt.which : evt.keyCode
        if (iKeyCode != 46 && iKeyCode > 31 && (iKeyCode < 48 || iKeyCode > 57))
            return false;

        return true;
Try it


Just outside the </body>, I have the JavaScript block with a function named as isNumber(), which takes a Keyboard event as parameter. The parameter will be checked against Ascii KeyCodes.

Ascci stands for "American Standard Code for Information Interchange".

Check the KeyCode

We'll check each key event individually against each character, which the user enters in the textbox.

The ternary code var iKeyCode = (evt.which) ? evt.which : evt.keyCode works like the if…else condition.

However, you can also write the code in this way:

var iKeyCode;
If (evt.which)
    iKeyCode = evt.which;
    iKeyCode = evt.keyCode;	// Keywords are case sensitive.

The value in iKeyCode will be checked against a range of Ascii codes to make sure it’s a number (numeric value). The function will return true or false based on the entered value. No value will be displayed on the textbox control if the condition returns false.

Also Read: Get the Name, Size and Number of Files from Multiple File Input using JavaScript

When a user enters a value in the input box, the onkeypress event calls the isNumber() function (that I have written inside the <script> tag), along with the key press event. The function checks every key entered in the input box and returns true only if the entered values in a number, else it will return false. If it is false, the user won’t see any value in the box.

You should also try this

If you are a .net programmer, you can try a small assignment on your own. Use the Asp.Net textbox control instead of <input> box, and see if the function works as I have explained above.

<asp:TextBox ID="tbPh" runat="server"></asp:TextBox>

Thanks for reading.

← PreviousNext →