HTML5 validation: field not required but, if filled in, must match pattern?

Question

Playing around with HTML5 validation, it occurs to me that it is (seemingly) not possible to validate the input of a field unless it is required.

In other words, it's not possible to say "this field is not required, but if you do fill it in, it must match pattern X." For example:

<textarea pattern='.{5,10}'></textarea>

With 1-4 characters (inclusive) entered into the textarea, running element.willValidate and element.checkValidity() both return true.

I know HTML5 validation isn't perfect just yet. Is the "validate only if it's filled in" concept not possible with HTML5?

Answer 1

You can add another option in regex for completely empty text

<textarea pattern='(.{5,10}|^$)'></textarea>