How do I validate a decimal field with jquery and regex?

Question

this is what I have so far:

$j(element)..keypress(function(e){
        var val = $j(this).val();
        if (("1234567890.").indexOf(e.charCode) > -1){
            if (val.length > 0){
                var regex = /(\+|-)?(\d*\.\d*)/;
                if (regex.test(val)){
                    return true;
                } else {
                    return false;
                }       
            } else {
                return true;
            }
        } else {
            return false;
        }
    });

but for some reason, the text field only allows one character... and not even a number

elclanrs · Accepted Answer · 2012-02-09 02:57:15Z

2

This checks a decimal number, with an optional +/- sign character. Found under 5sec in google. /^\s*(\+|-)?((\d+(\.\d+)?)|(\.\d+))\s*$/

answered Feb 9, 2012 at 2:57

elclanrs

94.2k21 gold badges137 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

NullVoxPopuli Over a year ago

what's wrong with doing it this way? (\+|-)?(\d*\.\d*) this makes it so the decimal is optional, but the decimal itsself can still be present.

elclanrs Over a year ago

I didn't check the actual code but it seems correct, I just copy/pasted from ntt.cc/2008/05/10/…

NullVoxPopuli Over a year ago

apparently, the problem is that I'm not doing the test after the text has been entered or something

elclanrs Over a year ago

Why do you need to do it in the keypress event? I've been trying solutions but it gets complicated. Basically, the first character and the . get rejected. I tried with keyup and it seems to solve the first character thing but not the .. It might be easier to just validate with a button...Look jsfiddle.net/9U2Mw/2

elclanrs Over a year ago

What about just detecting numbers and . on keypress with something like if ( (e.which >= 48 && e.which <= 57) || e.which == 190 || e.which == 110 ) { // blabla }. And then validate on submit? There's still a small chance they might input something invalid like 12.4.55 tho.

|

Community · Accepted Answer · 2017-05-23 09:59:22Z

2

First, shouldn't the return be the opposite? true if the test succeeds, false otherwise?

Second, . in a regex means "any character". If you want to match just a dot, use \.

This way your regex will work. However, for a better result, use the regex provided by elclanrs.

Note: it seems the value still hasn't changed when the keypress runs, so it's the old value that is being matched, not the new one.

Update: this is not an ideal solution, but will work nonetheless - You can use the code in this question to watch for changes in the input's value (it uses polling, though):

$(element).watch("value", function(propName, oldVal, newVal) {
    var regex = /^(\d*\.?\d*)$/;
    if (!regex.test(newVal)){
        $(this).val(oldVal);
    }
});

edited May 23, 2017 at 9:59

CommunityBot

11 silver badge

answered Feb 9, 2012 at 3:03

mgibsonbr

22.1k7 gold badges74 silver badges115 bronze badges

9 Comments

NullVoxPopuli Over a year ago

yeah, I noticed that after, I posted. but on Rubular.com, this (\+|-)?(\d*\.\d*) works with this test string: 23.43 23. .32 0.23 43.54 23 -23 -45.34 -.43 -0.34 but now I can't type anything in the text field

mgibsonbr Over a year ago

Yeah, I just noticed that (see my update). We need to find a way to do the check for the updated string...

NullVoxPopuli Over a year ago

hmm. I must check the jquery api then

mgibsonbr Over a year ago

if you find a better solution, post here, I'm interested in it too. However, see my update for a short-term workaround.

NullVoxPopuli Over a year ago

i'll update with my current function. it behaves the same as in my original question, but I feel better about it.

|

NullVoxPopuli · Accepted Answer · 2012-02-09 04:22:00Z

2

With the help of @elclanrs and @mgibsonbr, I came to this:

$j = jQuery.noConflict();
$j(function() {
    $j("input").keypress(function(e) {
        var val = $j(this).val();
        var regex = /^(\+|-)?(\d*\.?\d*)$/;
        if (regex.test(val + String.fromCharCode(e.charCode))) {
            return true;
        }
        return false;
    });
});

which can be tested here: http://jsfiddle.net/9U2Mw/5/

answered Feb 9, 2012 at 4:22

NullVoxPopuli

65.6k76 gold badges216 silver badges364 bronze badges

2 Comments

mgibsonbr Over a year ago

Type +, click before it, type 2. IMHO you're making users' lifes more difficult, without preventing invalid input for all cases. But I already presented my opinion, if you really prefer the keypress approach, go with it.

NullVoxPopuli Over a year ago

oh, well for that, I'd just need to find a way to not allow typing before a + or -

Collectives™ on Stack Overflow

How do I validate a decimal field with jquery and regex?

3 Answers 3

6 Comments

9 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

9 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related