1

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.

DreamTeK
  • 32,537
  • 27
  • 112
  • 171
  • 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 May 15 '14 at 09:16
  • Thanks for the tip. Key up makes no difference and I need type number for device keypads. – DreamTeK May 15 '14 at 09: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 : http://stackoverflow.com/a/15649226/2806497 – OlivierH May 15 '14 at 09: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 May 15 '14 at 09: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 May 15 '14 at 09:28
  • I wasn't specifically talking about validation, I just meant those new inputs could lead you to face issues in existing javascript, on older browsers or even with styling. Personally, I won't use them for the moment, even if they are great new features. – OlivierH May 15 '14 at 09:49
  • Noted. thanks Oliver. fortunately for my project I have the option to say update or lose out :) – DreamTeK May 15 '14 at 09:54

3 Answers3

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.

Community
  • 1
  • 1
Jongware
  • 22,200
  • 8
  • 54
  • 100
  • This is true however not all browser behave, validation wont be consistent and regular expressioon validators prevent data submission which I also require. – DreamTeK May 15 '14 at 09:27
  • Well it worked for me after changing just this line in your fiddle. ..? – Jongware May 15 '14 at 09:38
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/

SubjectCurio
  • 4,702
  • 3
  • 32
  • 46
  • This is true however not all browser behave, validation wont be consistent and regular expressioon validators prevent data submission which I also require. – DreamTeK May 15 '14 at 09:26
  • Checking empty string does cause validation to occur if value is outside number field specified quantities. – DreamTeK May 15 '14 at 09:31
0

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

Tal Shaked
  • 154
  • 6