Pattern attribute on input element allows empty values?

Question

I'm requesting the user give me a nickname that is at least 3 characters and at most 30 characters and only contains letters and numbers.

<form>
    Nick: <input type="text" name="nick" pattern="[A-Za-z0-9]{3,30}">
    <input type="submit" value="Join lobby">
</form>

The problem I'm having is that empty forms are accepted.
As expected, strings that have a length of 1, 2, or 31+, or contain punctuation, do not pass. But if they just don't put anything into the box, it is accepted.

How can I fix this?

+1. I've changed title - if you don't like the edit fill free to rollback. — Alexei Levenkov
– Alexei Levenkov, Commented Jan 4, 2014 at 21:15

Explosion Pills · Accepted Answer · 2014-01-04 21:10:26Z

9

Add the required attribute.

<input type="text" required name="nick" pattern="[A-Za-z0-9]{3,30}" required>

Remember that you still need to do validation on the server side.

answered Jan 4, 2014 at 21:10

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

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

Collectives™ on Stack Overflow

Pattern attribute on input element allows empty values?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related