Question

Is there any existing jQuery functionality that can test if characters entered into a textbox are either numeric, or valid in a number?

Such as

.00 or 0.00, but not 0.00.00 or 0a

What I’d like to do is catch any invalid characters before they appear in the textbox.

If it’s not possible with jQuery, what’s the best way to approach this?

I know with JavaScript I can test isNaN() and then return false, but that’s going to start getting hairy when I have to account for all possible keystrokes.

Answer 1

It’s a little tricky, since you want to make sure you can enter all numbers left to right, but something like this:

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

Try it out with this jsFiddle

Note how I’m checking 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 major issue (try the arrow keys).

Here’s a slightly more elegant solution that accommodates a default value as well:

$(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 it out with this jsFiddle

Example HTML for the above:

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

Note how when you use .test() you have to test from the beginning ^ to the end $.