HTML 5 Input Pattern

Question

I am attempting to restrict an input to A-Z and a-z with a minimum of 1 character and a maximum of 20 and it doesn't seem to be working.

<form>
  <input name=Last_Name type=text pattern="[A-Za-z]{1,20}" placeholder=Smith>
</form>

Everytime I attempt to submit with a proper input it error with "Please match the requested format".

I edited your code to be a live demo and include a form so the patter could be triggered. I couldn't reproduce your problem. — Quentin
– Quentin, Commented Nov 12, 2015 at 15:50
Thanks, didn't know there was code snippets. Been awhile lol. — Unfundednut
– Unfundednut, Commented Nov 12, 2015 at 15:52
You need to read Falsehoods Programmers Believe About Names. With that pattern Miles O'Brian, Edward Tudor-Pole and everyone from one of the 张/張 families is going to find it rather hard to use your form. — Quentin
– Quentin, Commented Nov 12, 2015 at 15:53
Quentin thanks but this is a predictable pattern as it is an internal website. — Unfundednut
– Unfundednut, Commented Nov 12, 2015 at 15:53
I'm now really curious about what sort of entity has an internal website with such predictable names. — Quentin
– Quentin, Commented Nov 12, 2015 at 15:56

Dimitri Mestdagh · Accepted Answer · 2015-11-12 15:48:11Z

5

It should work properly, except that the minimum length will be ignored because the pattern match only starts to be used if there is a value entered.

If you leave the textfield blank, it will not run the pattern to validate, so even though it wouldn't match your pattern, it will be valid.

So in addition to that, add a required attribute. This works for me:

<form>
    <input name=Last_Name type=text pattern="[A-Za-z]{1,20}" required placeholder=Smith />
    <button type="submit">Test</button>
</form>

answered Nov 12, 2015 at 15:48

Dimitri Mestdagh

45.2k17 gold badges111 silver badges148 bronze badges

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

5 Comments

Unfundednut Over a year ago

What is odd is your code snippet works, but when its "live" it doesn't. The actual line is

echo "<td style=\"text-align:left\"><input name=First_Name type=text pattern=\"[A-Za-z]{20}\" placeholder=John required></td>";

as its in PHP

Dimitri Mestdagh Over a year ago

Verify that the generated HTML code is the same, if it isn't, copy the entire form, exclude all other fields and verify if that's similar to the HTML code in my answer.

Unfundednut Over a year ago

The generated code is what I pasted from my example. I pulled it from the source after loading the site.

Dimitri Mestdagh Over a year ago

it is valid as well, however, by removing the 1 from {1,20} you changed your pattern, it is only valid now if it is exactly 20 characters, keep that in mind.

Unfundednut Over a year ago

There we go I have 2 lines right on top of each other missed I removed the 1. Thanks.

Collectives™ on Stack Overflow

HTML 5 Input Pattern

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related