Follow up r75627 (code review comments):

* Replace background coloring with a label insertion on the right or left of input depending on language direction.
* User side validation of email according to an HTML5 specifications provided by Simetrical :
http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#e-mail-state
 Code comments should be self explaining.

Possible follows up:
- use JQuery Validation plugin
- make the validation part a mediawiki validation module
- server side validation

diff --git a/resources/mediawiki.specials/mediawiki.specials.preferences.css b/resources/mediawiki.specials/mediawiki.specials.preferences.css
index 5c39a02..5f5b3c2 100644 (file)
--- a/resources/mediawiki.specials/mediawiki.specials.preferences.css
+++ b/resources/mediawiki.specials/mediawiki.specials.preferences.css
@@ -1,8 +1,21 @@
-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;
 }

diff --git a/resources/mediawiki.specials/mediawiki.specials.preferences.js b/resources/mediawiki.specials/mediawiki.specials.preferences.js
index 36e1c21..e536bd3 100644 (file)
--- a/resources/mediawiki.specials/mediawiki.specials.preferences.js
+++ b/resources/mediawiki.specials/mediawiki.specials.preferences.js
@@ -41,19 +41,87 @@ $( '#preferences' )
 
 // 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 );
+};