Display errors at a form rather than a field level

q2a · Nov 25, 2016 · 871878d · 871878d
1 parent f22e8ab
commit 871878d
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 13 deletions.
diff --git a/qa-include/qa-theme-base.php b/qa-include/qa-theme-base.php
@@ -940,7 +940,7 @@ public function form_body($form)
 		if ($columns)
 			$this->output('<table class="qa-form-'.$form['style'].'-table">');
 
-		$this->form_ok($form, $columns);
+		$this->form_result($form, $columns);
 		$this->form_fields($form, $columns);
 		$this->form_buttons($form, $columns);
 
@@ -953,6 +953,29 @@ public function form_body($form)
 			$this->output('</div>');
 	}
 
+	public function form_result($form, $columns)
+	{
+		$key = null;
+		if (!empty($form['ok']))
+			$key = 'ok';
+		else if (!empty($form['error']))
+			$key = 'error';
+		if (isset($key)) {
+			$this->output(
+				'<tr>',
+				sprintf('<td colspan="%s" class="qa-form-%s-result-%s">', $columns, $form['style'], $key),
+				$form[$key],
+				'</td>',
+				'</tr>'
+			);
+		}
+	}
+
+	/**
+	 * @deprecated Providing always an OK result is deprecated and it is now possibe to
+	 * add an 'error' key apart from the 'ok' key to the form. Check the form_result function
+	 * to see the new output. You might need to modify CSS or JS files
+	 */
 	public function form_ok($form, $columns)
 	{
 		if (!empty($form['ok'])) {

diff --git a/qa-theme/Candy/qa-styles.css b/qa-theme/Candy/qa-styles.css
@@ -145,7 +145,9 @@ h2 {font-size:22px; color:#c659ab; padding-top:12px; clear:both;}
 
 .qa-form-tall-table {width:500px; border-collapse:collapse;}
 .qa-form-tall-spacer {line-height:1px; padding:0; font-size:1px;}
-.qa-form-tall-ok {color:#090; font-size:18px; padding:6px; text-align:center;}
+.qa-form-tall-result-ok, .qa-form-tall-result-error {font-size:18px; padding:6px; text-align:center;}
+.qa-form-tall-result-ok {color:#090;}
+.qa-form-tall-result-error {color:#c00;}
 .qa-form-tall-label {background:url(form-cell-bg.png) repeat-y scroll left top transparent; border-top:6px solid #fff; color:#253845; padding:8px; font-size:14px;}
 .qa-form-tall-data {background:url(form-cell-bg.png) repeat-y scroll left top transparent; padding:8px; width:480px;}
 .qa-form-tall-text,.qa-form-tall-number {padding:3px;}
@@ -167,7 +169,9 @@ h2 {font-size:22px; color:#c659ab; padding-top:12px; clear:both;}
 
 .qa-form-wide-table {background:url(form-cell-bg.png) repeat-y scroll left top transparent; border-collapse:collapse;}
 .qa-form-wide-spacer {line-height:1px; padding:0; font-size:1px; border-bottom:4px solid #fff; background:#fff;}
-.qa-form-wide-ok {color:#090; font-size:18px; padding:6px; text-align:center;}
+.qa-form-wide-result-ok, .qa-form-wide-result-error {font-size:18px; padding:6px; text-align:center;}
+.qa-form-wide-result-ok {color:#090;}
+.qa-form-wide-result-error {color:#c00;}
 .qa-form-wide-label {border-bottom:2px solid #FFF; color:#253845; padding:10px; font-size:14px; font-weight:normal; white-space: nowrap;}
 .qa-form-wide-data {border-bottom:2px solid #FFF; padding:6px 10px;}
 .qa-form-wide-text,.qa-form-wide-number {padding:3px;}

diff --git a/qa-theme/Classic/qa-styles.css b/qa-theme/Classic/qa-styles.css
@@ -146,7 +146,9 @@ h2 {font-size:16px; padding-top:12px; clear:both;}
 
 .qa-form-tall-table {border:1px solid #658296; background-color:#d9e3ea; width:500px;}
 .qa-form-tall-spacer {background:#E3F4FF; line-height:1px; padding:0; font-size:1px;}
-.qa-form-tall-ok {background:#efe; border:1px solid #090; color:#090; font-size:18px; padding:6px; text-align:center;}
+.qa-form-tall-result-ok, .qa-form-tall-result-error {font-size:18px; padding:6px; text-align:center;}
+.qa-form-tall-result-ok {background:#efe; border:1px solid #090; color:#090;}
+.qa-form-tall-result-error {background:#fee; border:1px solid #c00; color:#c00;}
 .qa-form-tall-label {color:#253845; padding:12px 8px 2px 8px; font-size:13px; font-weight:bold;}
 .qa-form-tall-data {padding:0 8px 6px 8px; width:480px;}
 .qa-form-tall-text,.qa-form-tall-number {padding:3px;}
@@ -166,7 +168,9 @@ h2 {font-size:16px; padding-top:12px; clear:both;}
 
 .qa-form-wide-table {border:1px solid #658296; background-color:#d9e3ea;}
 .qa-form-wide-spacer {background:#E3F4FF; line-height:1px; padding:0; font-size:1px;}
-.qa-form-wide-ok {background:#efe; border:1px solid #090; color:#090; font-size:16px; padding:6px; text-align:center;}
+.qa-form-wide-result-ok, .qa-form-wide-result-error {font-size:16px; padding:6px; text-align:center;}
+.qa-form-wide-result-ok {background:#efe; border:1px solid #090; color:#090;}
+.qa-form-wide-result-error {background:#fee; border:1px solid #c00; color:#c00;}
 .qa-form-wide-label {color:#253845; padding:6px 10px; font-size:13px; font-weight:bold; white-space: nowrap;}
 .qa-form-wide-data {padding:6px 10px;}
 .qa-form-wide-text,.qa-form-wide-number {padding:3px;}

diff --git a/qa-theme/Snow/qa-styles.css b/qa-theme/Snow/qa-styles.css
@@ -1228,13 +1228,20 @@ div.header-banner {
 	padding: 0;
 }
 
-.qa-form-tall-ok {
-	background: #6AAA2B;
-	color: #fff;
+.qa-form-tall-result-ok, .qa-form-tall-result-error {
 	font-size: 18px;
 	text-align: center;
 	padding: 6px;
 	border-radius: 3px;
+	color: #fff;
+}
+
+.qa-form-tall-result-ok {
+	background: #6AAA2B;
+}
+
+.qa-form-tall-result-error {
+	background: #C00;
 }
 
 .qa-form-tall-label {
@@ -1370,13 +1377,20 @@ div.header-banner {
 	padding: 0;
 }
 
-.qa-form-wide-ok {
-	color: #090;
+.qa-form-wide-result-ok, .qa-form-wide-result-error {
 	font-size: 18px;
 	text-align: center;
 	padding: 6px;
 }
 
+.qa-form-wide-result-ok {
+	color: #090;
+}
+
+.qa-form-wide-result-error {
+	color: #C00;
+}
+
 .qa-form-wide-label {
 	border-bottom: 1px solid #f4f4f4;
 	color: #444;

diff --git a/qa-theme/SnowFlat/js/snow-core.js b/qa-theme/SnowFlat/js/snow-core.js
@@ -70,7 +70,7 @@ $(document).ready(function () {
 	/*
 	 * add wrapper to the message sent note 'td'
 	 */
-	$('.qa-part-form-message .qa-form-tall-ok').wrapInner('<div class="qam-pm-message"></div>');
+	$('.qa-part-form-message .qa-form-tall-result-ok').wrapInner('<div class="qam-pm-message"></div>');
 
 	// fix the visible issue for main nav, top search-box
 	$(window).resize(function () {

diff --git a/qa-theme/SnowFlat/qa-styles.css b/qa-theme/SnowFlat/qa-styles.css
@@ -1936,13 +1936,21 @@ input[type="submit"], button {
 	width: 100%;
 }
 
-.qa-form-tall-ok, .qa-form-wide-ok {
-	background-color: #27ae60;
+.qa-form-tall-result-ok, .qa-form-wide-result-ok,
+.qa-form-tall-result-error, .qa-form-wide-result-error {
 	padding: 10px;
 	display: table-cell;
 	color: #fff;
 }
 
+.qa-form-tall-result-ok, .qa-form-wide-result-ok {
+	background-color: #27ae60;
+}
+
+.qa-form-tall-result-error, .qa-form-wide-result-error {
+	background-color: #e74c3c;
+}
+
 .qa-form-wide-error, .qa-form-tall-error {
 	color: #e74c3c;
 }