34

I can't get the pattern attribute on a text input to be limited to numbers. According to the javascript regular expressions list, [d] or [0-9] should do it. But in

<input dir="ltr" type="text" title="Enter numbers only." pattern="[\d]{9}" id="uid" name="1" placeholder="Enter UID" required="'required'" class="required placeholder" minlength="9" maxlength="9" autocomplete="off" />

it doesn't work for me (in any browsers). I have to add js validation such as the following (decided to go this route for simplicity based on this post):

HTML:

onkeypress='return isNumberKey(event)' 

js:

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

I mainly want to know if there's a way I can get the pattern attribute to work. But also feel free to comment on whether I'm using best practices route for this. I don't want to use HTML5 <input type="number"/> as it's not widely supported enough yet.

10
  • Have you tried using [0-9]{9} instead ? Sep 28, 2013 at 12:01
  • what browser and version are you using? the pattern attribute is also html and supported only in the latest browsers (i.e. IE9 doesn't support it). Sep 28, 2013 at 12:07
  • Seems to be working fine. I added a CSS check to give red when invalid and green when valid: jsfiddle.
    – Jerry
    Sep 28, 2013 at 12:11
  • 1
    The validation for the pattern attribute will not prevent adding incorrect information, but it will prevent submitting the form. You can also use the CSS selectors @Jerry used in his demo.
    – Ingo Bürk
    Sep 28, 2013 at 12:13
  • 1
    See this update of @Jerry's fiddle: jsfiddle.net/bHWcu/1
    – Ingo Bürk
    Sep 28, 2013 at 12:14

3 Answers 3

65

The validation for the pattern attribute will not prevent writing incorrect information into the field, but it will prevent submitting the form. The element also has an oninvalid event that will be called when the validation fails during the submit.

Alternatively, you can also use the CSS selectors :valid and :invalid to provide instant visual feedback.

Fiddle showing both (based on Jerry's fiddle from the comments): http://jsfiddle.net/bHWcu/1/

<form onsubmit="alert('Submitted');">
    <input dir="ltr" type="text" title="Enter numbers only." pattern="[\d]{9}" id="uid" name="1" placeholder="Enter UID" required="'required'" class="required placeholder" maxlength="9" autocomplete="off" />
    <input type="submit" value="Submit" />
</form>

Note that any client-side validation should only be used for fast feedback to improve the user experience. The actual validation should always be done server-side, as the client-side validation can easily be cheated.

8
  • 11
    Ah! Thank you. That was exactly my confusion: I thought the pattern attribute was supposed to disable the user from entering in invalid characters. Thanks everyone for the lightning fast feedback.
    – levininja
    Sep 28, 2013 at 12:24
  • 2
    +1 Might also add that the square brackets are not required for the pattern :)
    – Jerry
    Sep 28, 2013 at 12:24
  • 1
    Actually preventing entering data can be a slippery slope anyway, and it can be somewhat annoying, too. For example, \d{9} being validated on every keystroke would prevent the user from ever entering anything other than all 9 digits at once (through copy-paste).
    – Ingo Bürk
    Sep 28, 2013 at 12:26
  • Drop minlength, it is pointless and invalid. The markup could also be simplified in a few ways. But the main point is that the code in the answer is basically the same as in the question, so a casual reader will not immediately see what the problem was and what the solution is. Sep 28, 2013 at 12:31
  • 1
    @Leo {9} is short-hand for {9,9}.
    – Ingo Bürk
    May 12, 2016 at 19:53
5

The pattern attribute only prevents the form from being submitted if its value does not match. To actually prevent the user from entering invalid text, checkValidity() can be used.

Demo:

let prevVal = "";
document.querySelector('input').addEventListener('input', function(e){
  if(this.checkValidity()){
    prevVal = this.value;
  } else {
    this.value = prevVal;
  }
});
Only enter digits: <input pattern="[0-9]*">

1
  • 1
    Nice, thanks for pointing out checkValidity(). This looks to be super useful.
    – levininja
    May 2, 2021 at 4:18
0

A revised version to Unmitigated's answer.

let prevVal = "";
document.addEventListener("DOMContentLoaded", function(){
//window.addEventListener('load',function(){
    document.querySelector('INPUT').addEventListener('input', function(e){
      if(this.checkValidity()){
        prevVal = this.value;
      } else {
        this.value = prevVal;
      }
    });    
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.