HTML5 Email Input Pattern Attribute

Question

I’m trying to make a html5 form that contains one email input, one check box input, and one submit input. I'm trying to use the pattern attribute for the email input but I don't know what to place in this attribute. I do know that I'm supposed to use a regular expression that must match the JavaScript Pattern production but I don't know how to do this.

What I'm trying to get this attribute to do is to check to make sure that the email contains one @ and at least one or more dot and if possible check to see if the address after the @ is a real address. If I can't do this through this attribute then I'll consider using JavaScript but for checking for one @ and one or more dot I do want to use the pattern attribute for sure.

the pattern attribute needs to check for:

1. only one @
2. one or more dot
3. and if possible check to see if the address after the @ is a valid address

An alternative to this one is to use a JavaScript but for all the other conditions I do not want to use a JavaScript

Answer 1

Unfortunately, all suggestions except from B-Money are invalid for most cases.

Here is a lot of valid emails like:

• gü[e-mail] (German umlaut)
• антон@россия.рф (Russian, рф is a valid domain)
• chinese and many other languages (see for example International email and linked specs).

Because of complexity to get validation right, I propose a very generic solution:

<input type="text" pattern="[^@\s]+@[^@\s]+\.[^@\s]+" title="Invalid email address" />

It checks if email contains at least one character (also number or whatever except another "@" or whitespace) before "@", at least two characters (or whatever except another "@" or whitespace) after "@" and one dot in between. This pattern does not accept addresses like lol@company, sometimes used in internal networks. But this one could be used, if required:

<input type="text" pattern="[^@\s]+@[^@\s]+" title="Invalid email address" />

Both patterns accepts also less valid emails, for example emails with vertical tab. But for me it's good enough. Stronger checks like trying to connect to mail-server or ping domain should happen anyway on the server side.

BTW, I just wrote angular directive (not well tested yet) for email validation with novalidate and without based on pattern above to support DRY-principle:

.directive('isEmail', ['$compile', '$q', 't', function($compile, $q, t) {
    var EMAIL_PATTERN = '^[^@\\s]+@[^@\\s]+\\.[^@\\s]+$';
    var EMAIL_REGEXP = new RegExp(EMAIL_PATTERN, 'i');
    return {
        require: 'ngModel',
        link: function(scope, elem, attrs, ngModel){
            function validate(value) {
                var valid = angular.isUndefined(value)
                    || value.length === 0
                    || EMAIL_REGEXP.test(value);
                ngModel.$setValidity('email', valid);
                return valid ? value : undefined;
            }
            ngModel.$formatters.unshift(validate);
            ngModel.$parsers.unshift(validate);
            elem.attr('pattern', EMAIL_PATTERN);
            elem.attr('title', 'Invalid email address');
        }
    };
}])

Usage:

<input type="text" is-email />

For B-Money's pattern is "@" just enough. But it decline two or more "@" and all spaces.

Answer 2

In HTML5 you can use the new 'email' type: http://www.w3.org/TR/html-markup/input.email.html

For example:

<input type="email" id="email" />

If the browser implements HTML5 it will make sure that the user has entered a valid email address in the field. Note that if the browser doesn't implement HTML5, it will be treated like a 'text' type, ie:

<input type="text" id="email" />