JavaScript - Test for an integer

Javascript

Javascript Problem Overview


I have a text field that allows a user to enter their age. I am trying to do some client-side validation on this field with JavaScript. I have server-side validation already in place. However, I cannot seem to verify that the user enters an actual integer. I am currently trying the following code:

    function IsValidAge(value) {
        if (value.length == 0) {
            return false;
        }

        var intValue = parseInt(value);
        if (intValue == Number.NaN) {
            return false;
        }
        
        if (intValue <= 0)
        {
            return false;
        }
        return true;
    }

The odd thing is, I have entered individual characters into the textbox like "b" and this method returns true. How do I ensure that the user is only entering an integer?

Thank you

Javascript Solutions


Solution 1 - Javascript

var intRegex = /^\d+$/;
if(intRegex.test(someNumber)) {
   alert('I am an int');
   ...
}

That will absolutely, positively fail if the user enters anything other than an nonnegative integer.

Solution 2 - Javascript

For real int checking, use this:

function isInt(value) { 
    return !isNaN(parseInt(value,10)) && (parseFloat(value,10) == parseInt(value,10)); 
}

The problem with many int checks is that they return 'false' for 1.0, which is a valid integer. This method checks to make sure that the value of float and int parsing are equal, so for #.00 it will return true.

UPDATE:

Two issues have been discussed in the comments I'll add to the answer for future readers:

  • First, when parsing string values that use a comma to indicate the decimal place, this method doesn't work. (Not surprising, how could it? Given "1,001" for example in the US it's an integer while in Germany it isn't.)
  • Second, the behavior of parseFloat and parseInt has changed in certain browsers since this answer was written and vary by browser. ParseInt is more aggressive and will discard letters appearing in a string. This is great for getting a number but not so good for validation.

My recommendation and practice to use a library like Globalize.js to parse numeric values for/from the UI rather than the browser implementation and to use the native calls only for known "programmatically" provided values, such as a string parsed from an XML document.

Solution 3 - Javascript

use isNaN(n)

i.e.

if(isNaN(intValue))

in place of

if (intValue == Number.NaN)

Solution 4 - Javascript

UPDATE

I have fixed the code that had an error and added a var called key to store the key pressed code using keyCode and which, that depend of the browser.

var key = e.which || e.keyCode;

Thanks Donald.McLean :)


If you want to check if you are writing numbers while typing (and avoid writing other characters into your input field), you can use this simple function and you can define the elements allowed (this include whatever you want to filter). In this way you can choose not only integers but for example a certain group of characters. The example is based in jQuery to attach it to an input field.

$('#myInputField').keypress(function(e)
{
    var key = e.which || e.keyCode;

    if (!(key >= 48 && key <= 57) && // Interval of values (0-9)
         (key !== 8) &&              // Backspace
         (key !== 9) &&              // Horizontal tab
         (key !== 37) &&             // Percentage
         (key !== 39) &&             // Single quotes (')
         (key !== 46))               // Dot
    {
        e.preventDefault();
        return false;
    }
});

If you use other key than the defined, it won't appear into the field. And because Angular.js is getting strong these days. this is the directive you can create to do this in any field in your web app:

myApp.directive('integer', function()
{
    return function (scope, element, attrs)
    {
        element.bind('keydown', function(e)
        {
            var key = e.which || e.keyCode;

            if (!(key >= 48 && key <= 57) && // Interval (0-9)
                 (key !== 8) &&              // Backspace
                 (key !== 9) &&              // Horizontal tab
                 (key !== 37) &&             // Percentage
                 (key !== 39) &&             // Single quotes (')
                 (key !== 46))               // Dot
            {
                e.preventDefault();
                return false;
            }
        });
    }
});

But what happens if you want to use ng-repeat and you need to apply this directive only in a certain number of fields. Well, you can transform the upper directive into one prepared to admit a true or false value in order to be able to decide which field will be affected by it.

myApp.directive('rsInteger', function() {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            if (attrs.rsInteger === 'true') {
                element.bind('keydown', function(e)
                {
                    var key = e.which || e.keyCode;

                    if (!(key >= 48 && key <= 57) && // Interval (0-9)
                         (key !== 8) &&              // Backspace
                         (key !== 9) &&              // Horizontal tab
                         (key !== 37) &&             // Percentage
                         (key !== 39) &&             // Single quotes (')
                         (key !== 46))               // Dot
                    {
                        e.preventDefault();
                        return false;
                    }
                });
            }
        }
    }
});

To use this new directive you just need to do it in a input type text like this, for example:

<input type="text" rs-integer="true">

Hope it helps you.

Solution 5 - Javascript

I did this to check for number and integer value

if(isNaN(field_value * 1) || (field_value % 1) != 0 ) not integer;
else integer;

Modular Divison

Example

  1. 25.5 % 1 != 0 and ,
  2. 25 % 1 == 0

And if(field_value * 1) NaN if string eg: 25,34 or abcd etc ... else integer or number

Solution 6 - Javascript

> function isInt(x) {return Math.floor(x) === x;}

Solution 7 - Javascript

If your number is in the 32bit integer range, you could go with something like:

function isInt(x) { return ""+(x|0)==""+x; }

The bitwise or operator forces conversion to signed 32bit int. The string conversion on both sides ensures that true/false want be matched.

Solution 8 - Javascript

Nobody tried this simple thing?

function isInt(value) {
    return value == parseInt(value, 10);
}

What's wrong with that?

Solution 9 - Javascript

You may use isInteger() method of Number object

if ( (new Number(x)).isInteger() ) {
  // handle integer
}

This method works properly if x is undefined or null. But it has poor browser support for now

Solution 10 - Javascript

I found the NaN responses lacking because they don't pick up on trailing characters (so "123abc" is considered a valid number) so I tried converting the string to an integer and back to a string, and ensuring it matched the original after conversion:

if ("" + parseInt(stringVal, 10) == stringVal) { alert("is valid number"); }

This worked for me, up until the numbers were so large they started appearing as scientific notation during the conversion.

...so of course this means you could enter a number in scientific notation, but checking minimum and maximum values as well would prevent that if you so desire.

It will of course fail if you use separators (like "1,000" or "1.000" depending on your locale) - digits only allowed here.

Solution 11 - Javascript

If (enteredAge < "1" || enteredAge > "130") ......

Simple and it works....until they develop immortality

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionuser70192View Question on Stackoverflow
Solution 1 - Javascriptkarim79View Answer on Stackoverflow
Solution 2 - JavascriptPaulView Answer on Stackoverflow
Solution 3 - JavascriptJumipoView Answer on Stackoverflow
Solution 4 - JavascriptTimbergusView Answer on Stackoverflow
Solution 5 - JavascriptKshitizView Answer on Stackoverflow
Solution 6 - JavascriptKariudoView Answer on Stackoverflow
Solution 7 - JavascriptVajk HermeczView Answer on Stackoverflow
Solution 8 - Javascriptcode_assassinView Answer on Stackoverflow
Solution 9 - JavascriptSnegView Answer on Stackoverflow
Solution 10 - JavascriptMalvineousView Answer on Stackoverflow
Solution 11 - JavascriptZardiwView Answer on Stackoverflow