Number javascript validating nice!!

Monday, September 18, 2017 by Chams

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

<html> <head></head> <body> <div> Enter only Numbers: <input type="text" id="tbNumbers" value="" onkeypress="javascript:return isNumber(event)" /> </div> </body>

The Script

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

Try this demo

Enter only numbers with a Decimal value:

Overview

In the <head> tag we 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 codevar 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; Else iKeyCode = evt.keyCode;

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

A small assignment you can try 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>

It would be nice if you share the result with us, here. Anyways, thanks for reading.

Previous - JavaScript Thumbnail SliderNext - Validate at Client to Accept only Numbers in a Textbox using JavaScript



Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.

Enter your email id

Related Posts:

Join our Google Plus Community and be a part of a discussion!

http://www.encodedna.com/2012/12/JavaScript-accept-only-numbers-textbox.htm