Easy Forms is an application that allows you to create forms that are 100% compatible with HTML5. In this post we are going to see how to validate phone fields with the pattern attribute (regex), the validation will be performed both on the client side and on the server.
Phone Field Validation with Regex
To add a phone field to your form, just drag and drop a Text Field, click it and change its Input Type to “tel”.
By default and according to the HTML5 specifications, the Phone field accepts any format. This is very similar to how any Text field works, with the difference that you are optimizing the keyboard for mobile devices, such as tablets or smartphones. On these devices a numeric keyword will be displayed.
The reason why we don’t require an specific format by default is that each country has a different format, with different number separators, different number of characters and different country codes. For this reason, to validate specific formats we need to use a “pattern” (regular expression).
International Phone Number (E.164): +16308520397
Pattern: ^\+[1-9]\d{1,14}$
United States Number: 123-456-7890
Pattern: \d{3}[\-]\d{3}[\-]\d{4}
United Kingdon Phone Number: +44 (0) 7513 438167 or +44 (0) 7513438167 or 07513 438167 or 07513438167 or +44 7513 438167 or +447513438167
Patttern: ((\+44(\s\(0\)\s|\s0\s|\s)?)|0)7\d{3}(\s)?\d{6}
German Phone Number: +491739341284
Pattern: \(?\+\(?49\)?[ ()]?([- ()]?\d[- ()]?){10}
French Phone Number: 01 46 70 89 12 or 01-46-70-89-12 or 0146708912
Pattern: ^0[1-6]{1}(([0-9]{2}){4})|((\s[0-9]{2}){4})|((-[0-9]{2}){4})$
Brazil Phone Number: (11) 98800-0088
Pattern: \(\d{2,}\) \d{4,}\-\d{4}
Australia PHone Number: 0411 234 567 or (02) 3892 1111 or 38921111 or 0411234567
Pattern: ^\({0,1}((0|\+61)(2|4|3|7|8)){0,1}\){0,1}(\ |-){0,1}[0-9]{2}(\ |-){0,1}[0-9]{2}(\ |-){0,1}[0-9]{1}(\ |-){0,1}[0-9]{3}