Geek Answers Handbook

How to ensure that only valid numeric characters are entered in a text field?

Are there any existing jQuery functions that can check if the characters entered in the text box are numeric or real in number?

For instance,

.00 or 0.00 , but not 0.00.00 or 0a

What I would like to do is to catch any invalid characters before they appear in the text box.

If this is not possible with jQuery, what's the best way to approach this?

I know using JavaScript. I can test isNaN() and then return false, but this will start to get hairy when I have to consider all possible keystrokes.

+4
source share
5 answers

This is a little tricky since you want you to be able to enter all numbers from left to right, but something like this:

 $("input").keyup(function() { this.value = this.value.match(/[-+]?[0-9]*\.?[0-9]*/); });

Try this with jsFiddle

Notice how I check the number from left to right. This means that + must be valid. Also 5. must be valid, or you could never enter 5.0 or +5 .

Now the above has some serious problems (try the arrow keys).

Here's a slightly more elegant solution that also supports the default value:

 $(function() { // <== DOC ready var prev=""; // Initial value to replace default text with $("input").click(function () { // Include a select on click $(this).select(); // if you have a default value }); $("input").keyup(function() { if(/^[-+]?[0-9]*\.?[0-9]*$/.test(this.value)) // If number.... prev = this.value; // store it as the fallback else this.value = prev; // else go to fallback }); });

Try this with jsFiddle

HTML example for the above:

 <input type="text" value="Enter only a number" />

Note that when using .test() you need to check from start ^ to end $ .

+2
source

just use regex

 $('#formelement').val().match(/[-+]?[0-9]*\.?[0-9]+/)

(excluding the selector, everything else is plain javascript)

As noted in the comments, since you need to do this for each character inserted, you need to consider the valid decimal part (for example, /[-+]?[0-9]*\.?[0-9]*/ )

Since the people in the comments make me be precise, I can offer you how to work out how to use this mapping for your purpose (but you don’t allow anything to the OP’s imagination :()

You can divide the regular expression into 3 regular expressions, one for the first part (the final character and the integer part), one for the first part plus a dot character and one for the whole number.

The validation procedure should accept the input at the time of writing if it matches at least one of the rules just described three times, and the check performed at the end should only be accepted when matching the last regular expression (since you are sending a value and you need it to it was right)

+9
source

It seems to work for regular expressions:

 var x = '0.00'; var y = '0.000.00'; x.match(/^[0-9]+\.*[0-9]*$/); y.match(/^[0-9]+\.*[0-9]*$/); // evaluates to null
+1
source

You can use a plugin or other separate library to validate the form. Example: http://www.geektantra.com/2009/09/jquery-live-form-validation/

Regular expressions will also work if you want to handle this manually.

0
source

I use this plugin for my projects: http://www.texotela.co.uk/code/jquery/numeric/

it's simple, but there are some errors with negative values, in any case, it works great for easy use!

you can use it like this:

 $("input.numericInput").numeric();
0
source

More articles:


All Articles