Does regex validation work when input type="number"?

Question

When using type="number" on an input field, regex validation does not appear to work.

<input type="number" step="any" min="0" max="24" value="0">

The new broswer based validation using step, min, max works as expected. However this is not consistent accross browsers?

http://jsfiddle.net/EkL3k/1/

QUESTION

How to make a number field validate using regular expression?

I'm also interested in other factors that differentiate a number and text field if anyone has information.

NOTES

I have discovered that checking for an empty string causes validation to fire IF the conditions on the number field are not met.

You can always call your validation by script on keyup. Or just set remove the type=number and do it with regex only. — Denys Séguret
– Denys Séguret, Commented May 15, 2014 at 9:16
Thanks for the tip. Key up makes no difference and I need type number for device keypads. — DreamTeK
– DreamTeK, Commented May 15, 2014 at 9:22
You can use element.validity.valid to check if the input contains valid number. There is also a pattern attribute in which you can set a regex to validate your input. Finally, you can prevent a user from typing something else than numbers by using keypress : stackoverflow.com/a/15649226/2806497 — OlivierH
– OlivierH, Commented May 15, 2014 at 9:24
BTW, be cautious with those new inputs, they're not fully implemented in all browsers (for example, firefox added support for it in its last update). I would not recommend to use it in a production context. — OlivierH
– OlivierH, Commented May 15, 2014 at 9:27
Exactly which is why I am using regular expression validators to ensure full support. I cannot rely on the number validation built into the browser. — DreamTeK
– DreamTeK, Commented May 15, 2014 at 9:28

SubjectCurio · Accepted Answer · 2014-05-15 09:23:38Z

1

A number field performs its own validation, if it contains a non-numerical character, the value will automatically be removed until a correct value is given. You can see this with a console.log(value).

So you could also check for an empty string

function check(value, msg) {
  var valid = ((value != '') && /^\d*\.?\d*$/.test(value));    
  if (valid) {
      document.getElementById(msg).style.display = "none";
  } else {
      document.getElementById(msg).style.display= "inline";
  }
  return valid;
}

http://jsfiddle.net/EkL3k/6/

answered May 15, 2014 at 9:23

SubjectCurio

4,9103 gold badges34 silver badges48 bronze badges

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

2 Comments

DreamTeK Over a year ago

This is true however not all browser behave, validation wont be consistent and regular expressioon validators prevent data submission which I also require.

DreamTeK Over a year ago

Checking empty string does cause validation to occur if value is outside number field specified quantities.

Community · Accepted Answer · 2017-05-23 12:27:13Z

1

RegEx does not work because the returned value is a number, not a string. It works 'as expected' when you force the returned value to string format:

var valid = /^\d*\.?\d*$/.test(String(value));

You might want to read How to get the raw value an <input type="number"> field? as it suggests you don't have to validate a type=number input.

edited May 23, 2017 at 12:27

CommunityBot

11 silver badge

answered May 15, 2014 at 9:21

Jongware

22.6k8 gold badges56 silver badges104 bronze badges

2 Comments

DreamTeK Over a year ago

This is true however not all browser behave, validation wont be consistent and regular expressioon validators prevent data submission which I also require.

Jongware Over a year ago

Well it worked for me after changing just this line in your fiddle. ..?

Tal Shaked · Accepted Answer · 2014-05-15 09:29:27Z

add this code and add an id to your input.

$(document).ready(function() {
$("#txtboxToFilter").keydown(function (e) {
    // Allow: backspace, delete, tab, escape, enter and .
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
         // Allow: Ctrl+A
        (e.keyCode == 65 && e.ctrlKey === true) || 
         // Allow: home, end, left, right
        (e.keyCode >= 35 && e.keyCode <= 39)) {
             // let it happen, don't do anything
             return;
    }
    // Ensure that it is a number and stop the keypress
    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
        e.preventDefault();
    }
});
});

http://codepen.io/anon/pen/IDEGu

Collectives™ on Stack Overflow

Does regex validation work when input type="number"?

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related