Unfortunately, all suggestions except from B-Money are invalid for most cases.
Here is a lot of valid emails like:
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.