From HTML5 the control of forms is possible directly in the html input thanks to the pattern attribute and its value in the form of a regex.

A regex is a regular expression, in other words a very powerful text control filter verifying the validity of information.

Before HTML5, control of forms had to be done in JavaScript and its use was less convenient.

The pattern attribute is compatible on browsers:

• Firefox 4+
• Chrome 5+
• Opera 9.6+
• Internet explorer 10+

For browsers not accepting this attribute, it is simply ignored, hence the need to check in PHP. For safety reasons, this control is necessary.

Description of a form field in HTML5

<input type = « text » pattern = « regex » title = « Input help »>

In this field, the pattern attribute can accept a regex and the title attribute allows to display a tooltip with an indication of the expected field format. The advantage of the form control is to highlight an incorrectly filled field in order to to force the user to correct it.

This is what happens when a field requiring an email address is incorrectly filled:

And when the email is valid

So as soon as the user leaves the input field, he can know if his information is invalid.

Advantage of the pattern attribute over the type attribute

You must have noticed that the new values ​​of the type attribute of the HTML5 allow us to control the values ​​of the fields.

Namely the types of control: tel, URL, email and number.

I find the initiative very good, but for example the URL type only takes the format http://mysite.com.

However, we cannot modify its behavior so that the URL is in the form www.mysite.com or mysite.com

This concern is unfortunately present on all the types mentioned above. It is by need of flexibility that my choice turns to the Pattern attribute.

Principle of regex writing

Writing a regex is not a piece of cake: it requires extreme rigor, because even the smallest character matters.

For this reason, I’ll put a list of practical regexes for you later in this article.

First of all, you should know that a regex written in JavaScript and in HTML5 form does not look the same:

In javascript: ^ regex $ with ^ at the beginning and ending with $

In HTML5 : pattern = « regex »

You should also know that we are going to use the Unicode character table in order to authorize certain ranges of authorized characters:

Reading direction

Here is the toolbox to improve the filter :

[0-9]: The characters going from « 0 » to « 9 » in other words a number.

[a-zA-Z]: From « a » to « z » and from « A » to « Z »

[a-zA-ZÀ-ÿ]: From « a » to « z » and from « A » to « Z » and « À » to « ÿ » in short, all the words

[\ (- \ +]: It also works with special characters (in blue). To use them, you must place a backslash before it, and it reads: From « ( » to « + »

[^ 0-9]: All characters except those between « 0 » and « 9 »

HERE | LA: The pipe | matches an ‘or’, and it reads HERE or LA.

U {2,4}: Min and max limit of occurrence of the character, read « UU or » UUU « or » UUUU « 

BA.ON: The “. »Replaces any character, read: BAtON or BALON or BAcON…

Useful regex list

Now is the time to experience the real power of regexes, showing you the filters I use to control forms:

Type tests

Whole numbers

[0-9] +

Real numbers

[- +]? [0-9] + (\. [0-9] +)?

Number with floating point

[- +]? [0-9] + (\. [0-9] +)? ([EE] [- +]? [0-9] +)?

Date in dd / mm / yyyy format with yyyy between 1900 and 2099

(0 [1-9] | [12] [0-9] | 3 [01]) [\ /] (0 [1-9] | 1 [012]) [\ /] (19 | 20) \ d \ d

Boolean

true | false | 0 | 1

Administrative format tests

Postal code in the format 31 100 or 31100

([AZ] + [AZ]? \ -)? [0-9] {1,2}? [0-9] {3}

Phone in the format 04.00.00.00.00 or 0400000000

(01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09) [\. \ -]? [0-9] {2} [\. \ -]? [0-9] {2} [ \. \ -]? [0-9] {2} [\. \ -]? [0-9] {2}

Social security in the format 1 85 11 18 148 410 26

[12] [\. \ -]? [0-9] {2} [\. \ -]? (0 [1-9] | [1] [0-2]) [\. \ -]? ( [0-9] {2} | 2A | 2B) [\. \ -]? [0-9] {3} [\. \ -]? [0-9] {3} [\. \ -]? [0-9] {2}

Intra-community VAT in FR 02 254 254 254 format

[AZ] {2} [\. \ -]? [0-9] {2} [\. \ -]? [0-9] {3} [\. \ -]? [0-9] {3} [\. \ -]? [0-9] {3}

Siren in 451 789 356 format

[0-9] {3} [\. \ -]? [0-9] {3} [\. \ -]? [0-9] {3}

Siret in format 254 851 369 54218

[0-9] {3} [\. \ -]? [0-9] {3} [\. \ -]? [0-9] {3} [\. \ -]? [0-9] {5}

APE code in 52.4Z format

[0-9] {2} [\. \ -]? [0-9] {1}? [A-zA-Z]

Internet-related type tests

Email address in the format contact@montrezvous.net

[A-Za-z0-9] ([_ \. \ -]? [A-zA-Z0-9] +) *) @ ([A-Za-z0-9] +) (([_ \. \ -]? (a-zA-Z0-9] +) *) \. [Azz] {2,})

IP address in the format 192.168.12.1

(25 [0-5] | 2 [0-4] [0-9] | [01]? [0-9] [0-9]?) \. (25 [0-5] | 2 [0- 4] [0-9] | [01]? [0-9] [0-9]?) \. (25 [0-5] | 2 [0-4] [0-9] | [01]? [0-9] [0-9]?) \. (25 [0-5] | 2 [0-4] [0-9] | [01]? [0-9] [0-9]?)

Domain name in the format montrezvous.net

([a-zA-Z0-9] [[a-zA-Z0-9 \ -] {0.61} [a-zA-Z0-9])? \.) + [a-zA-Z] {2.6}

URL http or https or FTP with protocol, with or without login / mdp / port number in the format http://www.montrezvous.net or ftp: // me: mdp@ftp.montrezvous.net : 21

(((ht | f) tp (s?)) \: \ / \ /)? ([[a-zA-Z0-9] + ([@ \ – \.]? [a-zA-Z0-9]] +) *) (\: [a-zA-Z0-9 \ – \. ] +)? @)? (www. | ftp. | [a-zA-Z] +.)? [a-zA – Z0-9 \ – \.] + \. ([A-zA-Z] {2,}) (\: [0-9] +)

Hexadecimal color in the format # 0AF422 or # 0af422 :  

 # [0-9A-Fa-f] {6} 

---