jQuery Allow Numbers and Decimal only in Textbox [numeric]

Our Reader Score
[Total: 0 Average: 0]

jQuery allow numeric values: This post explains how at client-side using jquery allow only numbers and decimal values in the textbox. In another word how to restrict a user to enter only numeric (0 to 9) values in a textbox or input control. I have kept this article very simple so that anyone can implement basic validation of entering the numeric values in the textbox on their web page.

Best practise is to do validation on both the side .i.e on server-side (Php, Asp.net C# etc) and on client side(JavaScript/Jquery).

Most on the internet I have found the examples like using Keypress, Keyup and Keydown events and it works, but there’s a catch. The catch is what if the user didn’t press any key and direct drag drop values using the mouse (refer below-given image).

So today we learn how to restrict the user only to enter numeric values in the input textbox field also allow decimal values .i.e ( only allow one dot using jquery) whether user drag, drop, copy, paste or enter manually. Let’s head to the coding part.

Steps to allow only numbers and dot (decimal/ float)

  1. Download include jquery library.
  2. HTML markup: Add textbox.
  3. jquery: code to allow numeric and decimal values


Jquery allow numbers and decimal in textbox numeric validation

# Download and import jQuery library.

Before writing any code, first, we will download and add latest jQuery file into our Web page. You can host the jQuery file on the server, or you can direct use the Google-hosted jQuery library.

So after that, our Webpage head tag looks like as written below.

HTML Markup: Adding two textbox for validation.

Here we are adding two textboxes in our web page for validation. In the first textbox will allow only numeric values ( no dot or decimal). In the second textbox will allow entering numbers as well as decimal values. This is how our HTML look like as shown below

Jquery: Code to allow only numeric values.

Here in our 1st textbox, we added a class named as allow_numeric. On its input event will restrict numbers characters only.

Note: The jquery input event is not supported in IE version < 9. But older IE versions has its own event i.e., onpropertychange that does the same as oninput. Input event triggers whenever the input changes.

Try It Yourself ⇒

Jquery: Code to allow numbers and decimal values in the textbox.

Here in our 2nd textbox, we added allow_decimal class and on its event will allow a user to enter decimal values. With the following piece of jquery code will allow the user to enter one dot character in the textbox. So that user can enter decimal values in the textbox.

Try It Yourself ⇒

Output:  Numeric Validation client side

Jquery allow numbers and decimal in textbox numeric validation
Conclusion: Here we explained how at client-side using jquery we restrict users to enter only numbers or decimal values in a textbox.

You can also check these articles:

  1. An easy way to upload bulk images in Asp.net C# (Drag & Drop).
  2. Preview Image before upload it with jQuery in Asp.net.
  3. Convert HTML to Image in jQuery [Div to Image].
  4. Complete Tutorial: How to get table cell TD value in Jquery.
  5. jQuery Ajax JSON Example in Asp.net with SQL database.

Hope you enjoyed this tutorial. If you have any recommendations, please let us know what you think in the comment section below! See you again next time!

Get your Printable Copy