Pattern-HTML5 Form Enhancement: Input Types and Attributes

Pattern-HTML5 Form Enhancement: Input Types and Attributes

Pattern-HTML5 Form Enhancement: Input Types and Attributes

Pattern

The pattern attribute is likely to get a lot of developers very excited
(well, as excited as you can get about form attributes). It specifies a
JavaScript regular expression (regex or regexp) for the field’s value
to be checked against. It makes it easy for us to implement specific
validation for product codes, invoice numbers and so on. The possibilities
for pattern are wide-ranging, and this is just one simple example using a product number:

<label> Product Number:
<input pattern=”[0-g][A-Z]{3}” name=”product” id=”product” type=”text” title=”Single digit followed by three uppercase letters.”/>
</label>

This article originally appeared in issue 213 of .net magazine – the world’s
best-selling magazine for web designers and developers.