-input.valid {
+#mw-emailaddress-validity {
+ padding: 2px 1em;
+}
+body.ltr #mw-emailaddress-validity {
+ border-bottom-right-radius:0.8em;
+ border-top-right-radius:0.8em;
+}
+body.rtl #mw-emailaddress-validity {
+ border-bottom-left-radius:0.8em;
+ border-top-left-radius:0.8em;
+}
+#mw-emailaddress-validity.valid {
+ border: 1px solid #80FF80;
background-color: #C0FFC0;
color: black;
}
-input.invalid {
+#mw-emailaddress-validity.invalid {
+ border: 1px solid #FF8080;
background-color: #FFC0C0;
color: black;
}
// Lame tip to let user know if its email is valid. See bug 22449
$( '#mw-input-emailaddress' )
- .keyup( function() {
- var mailtxt = $(this).val();
- if( mailtxt == '' ) {
- // mail is optional !
- $(this).removeClass( "invalid" );
- $(this).removeClass( "valid" );
- return;
- }
- if( mailtxt.match( /.+@.+\..+/ ) ) {
- $(this).addClass( "valid" );
- $(this).removeClass( "invalid" );
- } else {
- $(this).addClass( "invalid" );
- $(this).removeClass( "valid" );
+ .keyup( function () {
+ if( $( "#mw-emailaddress-validity" ).length == 0 ) {
+ $(this).after( '<label for="mw-input-emailaddress" id="mw-emailaddress-validity"></label>' );
}
+ var isValid = wfValidateEmail( $(this).val() );
+ var class_to_add = isValid ? 'valid' : 'invalid';
+ var class_to_remove = isValid ? 'invalid' : 'valid';
+ $( '#mw-emailaddress-validity' )
+ .text( isValid ? 'Looks valid' : 'Valid address required!' )
+ .addClass( class_to_add )
+ .removeClass( class_to_remove );
} );
+
+/**
+ * Validate a string as representing a valid e-mail address
+ * according to HTML5 specification. Please note the specification
+ * does not validate a domain with one character.
+ *
+ * FIXME: should be moved to a JavaScript validation module.
+ */
+wfValidateEmail = function( mailtxt ) {
+ if( mailtxt == '' ) { return null; }
+
+ /**
+ * HTML 5 define a string as valid e-mail address if it matches
+ * the ABNF :
+ * 1 * ( atext / "." ) "@" ldh-str 1*( "." ldh-str )
+ * With:
+ * - atext : defined in RFC 5322 section 3.2.3
+ * - ldh-str : defined in RFC 1034 section 3.5
+ *
+ * (see STD 68 / RFC 5234 http://tools.ietf.org/html/std68):
+ */
+
+ /**
+ * First, define the RFC 5322 'atext' which is pretty easy :
+ * atext = ALPHA / DIGIT / ; Printable US-ASCII
+ "!" / "#" / ; characters not including
+ "$" / "%" / ; specials. Used for atoms.
+ "&" / "'" /
+ "*" / "+" /
+ "-" / "/" /
+ "=" / "?" /
+ "^" / "_" /
+ "`" / "{" /
+ "|" / "}" /
+ "~"
+ */
+ var rfc5322_atext = "a-z0-9!#$%&'*+-/=?^_`{|}—~" ;
+
+ /**
+ * Next define the RFC 1034 'ldh-str'
+ * <domain> ::= <subdomain> | " "
+ * <subdomain> ::= <label> | <subdomain> "." <label>
+ * <label> ::= <letter> [ [ <ldh-str> ] <let-dig> ]
+ * <ldh-str> ::= <let-dig-hyp> | <let-dig-hyp> <ldh-str>
+ * <let-dig-hyp> ::= <let-dig> | "-"
+ * <let-dig> ::= <letter> | <digit>
+ */
+ var rfc1034_ldh_str = "a-z0-9-" ;
+
+ var HTML5_email_regexp = new RegExp(
+ // start of string
+ '^'
+ +
+ // User part which is liberal :p
+ '[' + rfc5322_atext + '\\.' + ']' + '+'
+ +
+ // "apostrophe"
+ '@'
+ +
+ // Domain first character
+ '[' + rfc1034_ldh_str + ']'
+ +
+ // second char and following can include dot
+ '[' + rfc1034_ldh_str + '\\.' + ']' + '+'
+ +
+ // End of string
+ '$',
+ // RegExp is case insensitive
+ 'i'
+ );
+ return mailtxt.match( HTML5_email_regexp );
+};