5

I am looking to create a field within a HTML form which allows the user to type a National Insurance number (Format example: AB123456A) and nothing else.

I have looked around and found the below:

<input type="text" name="natin" 
    value="<?php echo"$nino";?>" 
    pattern="[A-Z]{2}[0-9]{6}[A-Z]{1}" 
    class="form-control" required>

However this allows me to type anything in, is there a way to restrict this?

Manfred Radlwimmer
  • 13,257
  • 13
  • 53
  • 62
Shane
  • 753
  • 3
  • 8
  • 21
  • 2
    What you're looking for is an input mask - see here http://stackoverflow.com/questions/12578507/how-to-implement-an-input-with-a-mask – Gavin Thomas May 10 '16 at 10:33
  • 1
    maybe this [plugin](https://igorescobar.github.io/jQuery-Mask-Plugin/) will be helpfull – ssnake May 10 '16 at 10:35
  • Similar question: http://stackoverflow.com/questions/2980038/allow-text-box-only-for-letters-using-jquery – Mosh Feu May 10 '16 at 10:37
  • Pattern allows you to use native html5 input validation. You can use `inputmode` to hint to the browser what keyboard to display (on mobile devices, etc). I strongly advise against trying to manipulate or block user input as it is being entered. Everyone hates forms that do this, and it causes more problems than it fixes. It is easier all around to alert the user that the value is invalid after they are done than try to limit their allowed behavior. Use a placeholder to help the user understand the expected format. – Anthony May 10 '16 at 10:40

1 Answers1

-1

Here is a demo working fine!

<form>
  <input type="text" name="natin" value="" pattern="[A-Z]{2}[0-9]{6}[A-Z]{2}" class="form-control" required>
  <input type="submit">
</form>
schnawel007
  • 3,982
  • 3
  • 19
  • 27