77

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

Improve this question
4
  • 4
    Just a related note, you should always call parseInt() with two parameters - the value and the radix (base). Otherwise parseInt() will attempt to guess the base of your input. Commented Jun 19, 2009 at 18:57
  • 1
    If the user enters "1.1", do you want the to fail validation, or be forced to "1"? Commented Jun 19, 2009 at 19:02
  • 1
    And for that matter, is "1.0" an integer? Commented Jun 19, 2009 at 19:12
  • MDN mentions: Use Number.isNaN() or isNaN() to most clearly determine whether a value is NaN. Commented Mar 18, 2015 at 12:26

12 Answers 12

Reset to default
132 
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.

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

7 Comments

This also fails if the user enters a negative integer.
(of course, ages aren't negative, but you should be specific about whether you are testing for any integer or any nonnegative integer.)
An array with one integer element also returns true ( intRegex.test( [42]) )
For future visitors, this answer is being explained in this question.
It's not a problem to fix the regex to work with negative numbers. var intRegex = /^-?\d+$/;
|
31

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.

Improve this answer

12 Comments

@Cesar, as far as I know, there are no programming languages that treat 1,2 as an integer, or as any single numerical value.
@ThaMe90 Thats true, but in my case I was using the isInt function to validate external input. '1,2' is a valid number in some countries where the comma is used as a decimal separator. See: en.wikipedia.org/wiki/File:DecimalSeparator.svg
function isInt(value) { return !isNaN(parseInt(value, 10)) && parseInt(value, 10) == parseFloat(value); } Should work in the above cases.
DON'T USE THIS ALGORITHM! It will tell you that isInt('5a') == true!
I've used almost the same method, adding a test on the toString method of both the original value and the transformed value : var isint = function (a) { return ((parseInt(a) === parseFloat(a)) && (a.toString() === parseInt(a).toString())); }
|
13

use isNaN(n)

i.e.

if(isNaN(intValue))

in place of 

if (intValue == Number.NaN)
Improve this answer

1 Comment

isNaN() means is Not a Number and returns false if it is a number. Just got me confused :)
8

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.

Improve this answer

1 Comment

Thanks Donald.McLean, but is not for the keys but for the browser: keyCode and watch as I have found here (stackoverflow.com/questions/4471582/javascript-keycode-vs-which), depends on the browser.
4

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

Improve this answer

Comments

2

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

Improve this answer

Comments

1

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.

Improve this answer

Comments

1

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.

Improve this answer

Comments

1

Nobody tried this simple thing?

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

What's wrong with that?

Improve this answer

2 Comments

While it's phrased as a question, this is an answer to the question. Unless there is some subtlety I'm missing, it even is a correct answer to the question.
parseInt('5HowdyDoody0',10) returns 5. That makes it unsuitable for validation.
0

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

Improve this answer

1 Comment

Note that browser support is pretty good here in 2024, but this is a static method so it should be called like this: Number.isInteger(new Number(x))
0

As the other answers show, there are lots of different ways to test if a string counts as an integer. Assuming you don't need to worry about scientific notation or locale-specific formatting (e.g. the commas in "1,000,000")* your best bet is probably a regular expression. Perhaps something like:

/^[-+]?\d+$/

Another possible method using Number.isInteger:

Number.isInteger(Number(x))

Or, if you're a bit naughty, you can use BigInt as a parsing function:

try { BigInt(x); return true; } catch { return false; }

(Bear in mind that the previous two tests will pass on the empty string, as well as strings that contain only whitespace, so you may want to test for that first.)

However, your question specifically asks about validating a user's age, so you probably want a stricter test than just "is it an integer?" You could modify our earlier regular expression to disallow negative numbers and leading zeroes:

/^\+?[1-9]\d*$/

but this would still give a pass to values like "999", which--unless some of your users are vampires--is probably not what you want.

To my mind, the simplest and clearest solution would be something like this:

function isValidAge(x) { let parsed = Number(x) return Number.isInteger(parsed) && parsed > 0 && parsed < 150 }

*If you do need to worry about scientific notation or locale-specific formatting, you should probably just use a library function.

Improve this answer

Comments

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

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

Improve this answer

3 Comments

Go ahead and test it with 0xA or 15.123
Yes. I suppose they can enter that. But I think it's sufficient for his needs. It works fine on my pages z
I seriously wouldn't hire you.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.