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?

Answer 1

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.