CODEWITHSUNDEEP
html
Unfundednut
Unfundednut

Reputation: 344

HTML 5 Input Pattern

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".

Upvotes: 1

Views: 113

Answers (1)

Dimitri Mestdagh
Dimitri Mestdagh

Reputation: 44755

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>

Upvotes: 5

Related Questions