Validate that text field is numeric usiung jQuery

Question

I have a simple issue -- I would like to check a field to see if it's an integer if it is not blank. I'm not using any additional plugins, just jQuery. My code is as follows:

if($('#Field').val() != "")
{
    if($('#Field').val().match('^(0|[1-9][0-9]*)$'))
    {
        errors+= "Field must be numeric.<br/>";
        success = false;
    }
}

...It doesn't seem to work. Where am I going wrong?

The error I receive is val() is not an object.

It turned out that the real issue was that I had my element name set and not the Id.

You are missing a closing quote on the first line - is that just a typo? — Justin Ethier, Mar 09 '10 at 00:42
when you say numeric, do you mean any kind of number (floats and whatnot) or do you mean an integer? — karim79, Mar 09 '10 at 00:45
http://stackoverflow.com/questions/18082/validate-numbers-in-javascript-isnumeric — David Morton, Mar 09 '10 at 00:54
Your code appears to be working, as far as the tests go. This is testing in Chrome and IE7 on Windows. — Jesse Millikan, Mar 09 '10 at 00:59

score 29 · Answer 1 · answered Sep 27 '12 at 17:03

29

Regex isn't needed, nor is plugins

if (isNaN($('#Field').val() / 1) == false) {
    your code here
}

answered Sep 27 '12 at 17:03

motomod

291
3
2

karim79 · Accepted Answer · 2010-03-09T01:01:22.523

23

This should work. I would trim the whitespace from the input field first of all:

if($('#Field').val() != "") {
    var value = $('#Field').val().replace(/^\s\s*/, '').replace(/\s\s*$/, '');
    var intRegex = /^\d+$/;
    if(!intRegex.test(value)) {
        errors += "Field must be numeric.<br/>";
        success = false;
    }
} else {
    errors += "Field is blank.</br />";
    success = false;
}

edited Mar 09 '10 at 01:01

answered Mar 09 '10 at 00:54

karim79

339,989
67
413
406

I get val() is not an object with this as well. – George Johnston Mar 09 '10 at 00:58
@George Johnston - because I had just typed it straight into the browser against my better judgement, and it was completely borked. Try now, if you will. – karim79 Mar 09 '10 at 01:02

score 4 · Answer 3 · edited Jul 09 '19 at 21:57

I know there isn't any need to add a plugin for this.

But this can be useful if you are doing so many things with numbers. So checkout this plugin at least for a knowledge point of view.

The rest of karim79's answer is super cool.

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
        <script type="text/javascript" src="jquery.numeric.js"></script>
    </head>

    <body>
        <form>
            Numbers only:
            <input class="numeric" type="text" />
            Integers only:
            <input class="integer" type="text" />
            No negative values:
            <input class="positive" type="text" />
            No negative values (integer only):
            <input class="positive-integer" type="text" />
            <a href="#" id="remove">Remove numeric</a>
        </form>

        <script type="text/javascript">
            $(".numeric").numeric();

            $(".integer").numeric(false, function() {
                alert("Integers only");
                this.value = "";
                this.focus();
            });

            $(".positive").numeric({ negative: false },
                function() {
                    alert("No negative values");
                    this.value = "";
                    this.focus();
                });

            $(".positive-integer").numeric({ decimal: false, negative: false },
                function() {
                    alert("Positive integers only");
                    this.value = "";
                    this.focus();
                });

            $("#remove").click(
                function(e)
                {
                    e.preventDefault();
                    $(".numeric,.integer,.positive").removeNumeric();
                }
            );
        </script>

    </body>
</html>

score 3 · Answer 4 · answered Jul 11 '13 at 20:57

I'm not certain when this was implemented, but currently you can use http://api.jquery.com/jQuery.isNumeric/

if($('#Field').val() != "")
{
    if($.isNumeric($('#Field').val()) {
        errors+= "Field must be numeric.<br/>";
        success = false;
    }
}

score 0 · Answer 5 · edited Jul 09 '19 at 22:00

All basic validation by using a class:

$('.IsInteger,.IsDecimal').focus(function (e) {
    if (this.value == "0") {
        this.value = "";
    }
});
$('.IsInteger,.IsDecimal').blur(function (e) {
    if (this.value == "") {
        this.value = "0";
    }
});

$('.IsInteger').keypress(function (e) {
    var charCode = (e.which) ? e.which : e.keyCode;
    if (charCode > 31
    && (charCode < 48 || charCode > 57))
        return false;
});
$('.IsDecimal').keypress(function (e) {
    var charCode = (e.which) ? e.which : e.keyCode;
    if (this.value.indexOf(".") > 0) {
        if (charCode == 46) {
            return false;
        }
    }
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
});
$('.IsSpecialChar').keypress(function (e) {
    if (e.keyCode != 8 && e.keyCode != 46 && e.keyCode != 37 && e.keyCode != 38 && e.keyCode != 39 && e.keyCode != 40)
        return false;
    else
        return true;
});
$('.IsMaxLength').keypress(function (e) {
    var length = $(this).attr("maxlength");
    return (this.value.length <= length);
});

$('.IsPhoneNumber').keyup(function (e) {
    var numbers = this.value.replace(/\D/g, ''),
    char = { 0: '(', 3: ') ', 6: ' - ' };
    this.value = '';
    for (var i = 0; i < numbers.length; i++) {
        this.value += (char[i] || '') + numbers[i];
    }
});
$('.IsEmail').blur(function (e) {
    var flag = false;
    var email = this.value;
    if (email.length > 0) {
        var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        flag = regex.test(email);
    }
    if (!flag)
        this.value = "";
});

Example:

<asp:TextBox 
    runat="server" 
    ID="txtDeliveryFee" 
    TextMode="SingleLine" 
    CssClass="form-control IsInteger" 
    MaxLength="3" 
    Text="0"
></asp:TextBox>

Just put the class name in the input.

What does "class" and "input" refer to (first and last sentence, respectively)? What is the name of the class? — Peter Mortensen, Jul 09 '19 at 22:05

score 0 · Answer 6 · edited Jul 09 '19 at 22:07

0

You don't need a regex for this one. Use the isNAN() JavaScript function.

The isNaN() function determines whether a value is an illegal number (Not-a-Number). This function returns true if the value is NaN, and false if not.

if (isNaN($('#Field').val()) == false) {

    // It's a number
}

edited Jul 09 '19 at 22:07

Peter Mortensen

30,738
21
105
131

answered Aug 12 '15 at 11:35

Jijo John

1,375
9
21

Validate that text field is numeric usiung jQuery

6 Answers6

Linked