Validate <input type="number" /> with AngularJS and Pattern/RegEx

Question

I have a input of type number, and I want to make sure it only accepts a number. I can do this fine on the Server side, but with AngularJS I can not get it to work.

Here's the code:

<input type="number" ng-pattern="/[0-9]+/" name="numOfFruits" ng-model="basket.numOfFruits" />

I suspect this has something to do with the pattern I am supplying [0-9]+ basically I only want numbers in this text box, anything that is not made up of the numbers 0 to 9, I want the input invalid.

At the moment, my input field sees this aa23423 as valid input!

Ibrahim Najjar · Accepted Answer · 2013-11-21 14:58:33Z

12

You need to use anchors:

/^[0-9]+$/

^: Start-of-line anchor.
[0-9]+ One or more numbers between 0 and 9.
$: End-of-line anchor.

So this matches the start of the string, then it matches the one or more digits, after that it looks for the end-of-string, so it matches a string containing only numbers and nothing else.

Otherwise, /[0-9]+/ will match only a part of aa23423, more accurately the number 23423 and thus will give you valid.

answered Nov 21, 2013 at 14:58

Ibrahim Najjar

19.5k4 gold badges74 silver badges96 bronze badges

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

10 Comments

Ibrahim Najjar Over a year ago

@Ciwan Then the problem lies somewhere else, the regular expression is perfectly OK.

J86 Over a year ago

Thanks I too tried your RegEx in a test just now, and it works perfect !! Why is it failing in AngularJS :/

Ibrahim Najjar Over a year ago

@Ciwan Unfortunately I don't with AngularJS. I just work with regular expression.

artur grzesiak Over a year ago

@Ciwan what version of angular do you use?

atdrago Over a year ago

It actually isn't a bug in AngularJS. Some browsers, on input[type=number], will change the value to '' instead of the actual value if it is not a valid Number. So Angular evaluates '' as required being invalid, not Number or your Regex.

|

Eugene Fidelin · Accepted Answer · 2014-05-09 16:04:57Z

5

Here is regexp to validate floating point numbers, both positive and negative:

/^-?[0-9]\d*(\.\d+)?$/

Use this regexp in 'text' input, example:

<input type="text" ng-model="score" ng-pattern="/^-?[0-9]\d*(\.\d+)?$/" required/>

edited May 9, 2014 at 16:04

answered May 9, 2014 at 15:59

Eugene Fidelin

2,3291 gold badge25 silver badges22 bronze badges

Comments

joe · Accepted Answer · 2014-07-11 05:03:49Z

3

Pattern don't work for input with type="number".
You can use type="text" and than convert value to number

edited Jul 11, 2014 at 5:03

joe

8,70410 gold badges60 silver badges84 bronze badges

answered Jul 11, 2014 at 4:41

user3827964

311 bronze badge

1 Comment

Cedric Over a year ago

If what the user inputs is considered a number (as of type="number"), then pattern will catch anything else (i.e. if you specify the length of the string, or if it can contain dots, or not). (tested on Firefox)

yotamsha · Accepted Answer · 2013-11-24 06:38:21Z

0

Try defining your regex as a scope variable In the controller, it worked for me.

answered Nov 24, 2013 at 6:38

yotamsha

3841 silver badge7 bronze badges

1 Comment

yotamsha Over a year ago

Take a look here at the way integerval is defined: sravi-kiran.blogspot.co.il/2013/02/…

Collectives™ on Stack Overflow

Validate <input type="number" /> with AngularJS and Pattern/RegEx

4 Answers 4

10 Comments

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

10 Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related