HTMLForm:

* Allow field validators to return multiple errors
* Allow field validators to return Message objects
* Add a class for fields for invalid input
* Style invalid <input> fields with red border color

Done with http://www.mediawiki.org/wiki/StyleGuide/Forms in mind

diff --git a/includes/HTMLForm.php b/includes/HTMLForm.php
index 7653e2a..137207d 100644 (file)
--- a/includes/HTMLForm.php
+++ b/includes/HTMLForm.php
@@ -890,8 +890,10 @@ abstract class HTMLFormField {
 
                if ( $errors === true || ( !$wgRequest->wasPosted() && ( $this->mParent->getMethod() == 'post' ) ) ) {
                        $errors = '';
+                       $errorClass = '';
                } else {
-                       $errors = Html::rawElement( 'span', array( 'class' => 'error' ), $errors );
+                       $errors = self::formatErrors( $errors );
+                       $errorClass = 'mw-htmlform-invalid-input';
                }
 
                $label = $this->getLabelHtml( $cellAttributes );
@@ -903,15 +905,15 @@ abstract class HTMLFormField {
 
                $fieldType = get_class( $this );
 
-               if ($verticalLabel) {
+               if ( $verticalLabel ) {
                        $html = Html::rawElement( 'tr',
                                array( 'class' => 'mw-htmlform-vertical-label' ), $label );
                        $html .= Html::rawElement( 'tr',
-                               array( 'class' => "mw-htmlform-field-$fieldType {$this->mClass}" ),
+                               array( 'class' => "mw-htmlform-field-$fieldType {$this->mClass} $errorClass" ),
                                $field );
                } else {
                        $html = Html::rawElement( 'tr',
-                               array( 'class' => "mw-htmlform-field-$fieldType {$this->mClass}" ),
+                               array( 'class' => "mw-htmlform-field-$fieldType {$this->mClass} $errorClass" ),
                                $label . $field );
                }
 
@@ -1009,6 +1011,33 @@ abstract class HTMLFormField {
 
                return $flatOpts;
        }
+
+       /**
+        * @param $errors String|Message|Array of strings or Message instances
+        * @return String html
+        */
+       protected static function formatErrors( $errors ) {
+               if ( is_array( $errors ) && count( $errors ) === 1 ) {
+                       $errors = array_shift( $errors );
+               }
+
+               if ( is_array( $errors ) ) {
+                       $lines = array();
+                       foreach ( $errors as $error ) {
+                               if ( $error instanceof Message ) {
+                                       $lines[] = Html::rawElement( 'li', array(), $error->parse() );
+                               } else {
+                                       $lines[] = Html::rawElement( 'li', array(), $error );
+                               }
+                       }
+                       return Html::rawElement( 'ul', array( 'class' => 'error' ), implode( "\n", $lines ) );
+               } else {
+                       if ( $errors instanceof Message ) {
+                               $errors = $errors->parse();
+                       }
+                       return Html::rawElement( 'span', array( 'class' => 'error' ), $errors );
+               }
+       }
 }
 
 class HTMLTextField extends HTMLFormField {

diff --git a/skins/common/shared.css b/skins/common/shared.css
index faadfb7..04c0e34 100644 (file)
--- a/skins/common/shared.css
+++ b/skins/common/shared.css
@@ -123,6 +123,10 @@ tr.mw-htmlform-vertical-label td.mw-label {
        text-align: left !important;
 }
 
+.mw-htmlform-invalid-input td.mw-input input {
+       border-color: red;
+}
+
 input#wpSummary {
        width: 80%;
 }
@@ -617,7 +621,7 @@ ol:lang(bn) li {
 .tipsy-arrow {
        position: absolute;
        /* @embed */
-       background: url( 'images/tipsy-arrow.gif' ) no-repeat top left;
+       background: url(images/tipsy-arrow.gif) no-repeat top left;
        width: 13px;
        height: 13px;
 }