js email validation improvment (onBlur)

commit log more or less follow the diff order:
* adds an id to the UserPreferences form (#mw-prefs-form)
* Add an handler on the form submission to validate the email. This also
  update the label and, when email is invalid, get focus on the field.
* use onBlur javascript event instead of onKeyUp (per r75670 CR)
* Label update is now a function ... (wfUpdateMailValidityLabel)
* ... let us update the label on form submission
* Clear the label message when email is empty (null)
* Made the js regexp to stop capturing
* Fix js email validation function to return a boolean
  (it still return 'null' when given an empty email address)

diff --git a/includes/Preferences.php b/includes/Preferences.php
index 0916040..8cf1f44 100644 (file)
--- a/includes/Preferences.php
+++ b/includes/Preferences.php
@@ -1154,6 +1154,7 @@ class Preferences {
                $formDescriptor = Preferences::getPreferences( $user );
                $htmlForm = new $formClass( $formDescriptor, 'prefs' );
 
+               $htmlForm->setId( 'mw-prefs-form' );
                $htmlForm->setSubmitText( wfMsg( 'saveprefs' ) );
                # Used message keys: 'accesskey-preferences-save', 'tooltip-preferences-save'
                $htmlForm->setSubmitTooltip( 'preferences-save' );

diff --git a/resources/mediawiki.special/mediawiki.special.preferences.js b/resources/mediawiki.special/mediawiki.special.preferences.js
index f73e5ee..084ed90 100644 (file)
--- a/resources/mediawiki.special/mediawiki.special.preferences.js
+++ b/resources/mediawiki.special/mediawiki.special.preferences.js
@@ -39,25 +39,51 @@ $( '#preferences' )
                );
        } );
 
+// User preference form validation
+$( '#mw-prefs-form' )
+       .submit( function () {
+               var isValid = wfValidateEmail( $('#mw-input-wpemailaddress').val() );
+               wfUpdateMailValidityLabel( isValid );
+               if(isValid == false ) {
+                       $('#mw-input-wpemailaddress').focus();
+                       return false;
+               }
+       }
+);
+
 // Lame tip to let user know if its email is valid. See bug 22449
 $( '#mw-input-wpemailaddress' )
-       .keyup( function () {
+       .blur( function () {
                if( $( "#mw-emailaddress-validity" ).length == 0 ) {
                        $(this).after( '<label for="mw-input-wpemailaddress" 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 ?
-                               mediaWiki.msg( 'email-address-validity-valid' )
-                               : mediaWiki.msg( 'email-address-validity-invalid' )
-                       )
-                       .addClass( class_to_add )
-                       .removeClass( class_to_remove );
+               wfUpdateMailValidityLabel( isValid );
        } );
 
+/**
+ * Given an email validity status (true, false, null) update the label CSS class
+ */
+wfUpdateMailValidityLabel = function( isValid ) {
+       var class_to_add    = isValid ? 'valid' : 'invalid';
+       var class_to_remove = isValid ? 'invalid' : 'valid';
+
+       // We allow null address
+       if( isValid == null ) {
+               $( '#mw-emailaddress-validity' ).text( '' )
+               .removeClass( 'valid invalid');
+       } else {
+       $( '#mw-emailaddress-validity' )
+               .text(
+                       isValid ?
+                       mediaWiki.msg( 'email-address-validity-valid' )
+                       : mediaWiki.msg( 'email-address-validity-invalid' )
+               )
+               .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
@@ -120,12 +146,12 @@ wfValidateEmail = function( mailtxt ) {
                '[' + rfc1034_ldh_str + ']+'
                +
                // Second part and following are separated by a dot
-               '(\\.[' + rfc1034_ldh_str + ']+)+'
+               '(?:\\.[' + rfc1034_ldh_str + ']+)+'
                +
                // End of string
                '$',
                // RegExp is case insensitive
                'i'
                );
-       return mailtxt.match( HTML5_email_regexp );
+       return (null != mailtxt.match( HTML5_email_regexp ) );
 };