From 99e39310a9411a45085c01c85251bb9403c9fcc0 Mon Sep 17 00:00:00 2001
From: "stephen@cubedesigners.com"
 <stephen@cubedesigners.com@f5622870-0f3c-0410-866d-9cb505b7a8ef>
Date: Thu, 30 Jun 2016 11:34:53 +0000
Subject: [PATCH] Improve validation error message display on quote form. WIP
 #482 @2

---
 .../controllers/AjaxController.php            |  1 +
 framework/application/forms/RequestQuote.php  | 16 +++----
 .../application/views/helpers/QuoteForm.php   |  5 ++-
 js/315-quote.js                               | 15 +++++++
 less/001-variables.less                       |  1 +
 less/315-quote.less                           | 45 +++++++++++++++++++
 6 files changed, 71 insertions(+), 12 deletions(-)
 create mode 100644 js/315-quote.js

diff --git a/framework/application/controllers/AjaxController.php b/framework/application/controllers/AjaxController.php
index dd23b5a..1015ddb 100644
--- a/framework/application/controllers/AjaxController.php
+++ b/framework/application/controllers/AjaxController.php
@@ -12,6 +12,7 @@ class AjaxController extends CubeIT_Controller_AjaxController {
 
         } else {
             $this->_datas->refreshForm($form); // Respond with validation errors
+            $this->_datas->addAction('eval', 'displayErrors()');
         }
 
     }
diff --git a/framework/application/forms/RequestQuote.php b/framework/application/forms/RequestQuote.php
index 72c62df..bbbdeba 100644
--- a/framework/application/forms/RequestQuote.php
+++ b/framework/application/forms/RequestQuote.php
@@ -5,22 +5,20 @@ class Fluidbook_Form_RequestQuote extends CubeIT_Form {
     public function init() {
         parent::init();
 
+        $first_name = new Zend_Form_Element_Text('first_name');
+        $first_name->setLabel(__('Prénom'));
+        $this->addElement($first_name);
+
         $last_name = new Zend_Form_Element_Text('last_name');
-        $last_name->setLabel(__('Votre nom'));
+        $last_name->setLabel(__('Nom'));
         $last_name->setRequired(true);
         $last_name->addErrorMessage(__('Votre nom est obligatoire'));
         $this->addElement($last_name);
 
-        $first_name = new Zend_Form_Element_Text('first_name');
-        $first_name->setLabel(__('Prénom'));
-        $first_name->setRequired(false);
-        $first_name->addErrorMessage(__('Votre prénom est obligatoire'));
-        $this->addElement($first_name);
-
         $company = new Zend_Form_Element_Text('company');
         $company->setLabel(__('Nom de la société'));
         $company->setRequired(true);
-        $company->addErrorMessage(__('Champ obligatoire'));
+        $company->addErrorMessage(__('Votre nom de la société est obligatoire'));
         $this->addElement($company);
 
         $contact_type = new Zend_Form_Element_Select('contact_type');
@@ -45,8 +43,6 @@ class Fluidbook_Form_RequestQuote extends CubeIT_Form {
 
         $phone = new Zend_Form_Element_Text('phone');
         $phone->setLabel(__('Téléphone'));
-        $phone->setRequired(false);
-        $phone->addErrorMessage(__('Champ obligatoire'));
         $this->addElement($phone);
 
         $comments = new Zend_Form_Element_Textarea('comments');
diff --git a/framework/application/views/helpers/QuoteForm.php b/framework/application/views/helpers/QuoteForm.php
index 3a90793..69bb665 100644
--- a/framework/application/views/helpers/QuoteForm.php
+++ b/framework/application/views/helpers/QuoteForm.php
@@ -10,11 +10,12 @@ class Fluidbook_View_Helper_QuoteForm extends CubeIT_View_Helper_Abstract {
         $res .= '<div class="text col-2">';
         $res .= '<h1 class="title">'. nl2br($this->option('quote_heading')) .'</h1>';
         $res .= $this->markupDotclear($this->option('quote_description'));
-        $res .= '</div>'; // .col-2
+        $res .= '</div>'; // .text
         $res .= '<div class="form col-4">';
         $form = new Fluidbook_Form_RequestQuote();
         $res .= $form;
-        $res .= '</div>'; // .col-4
+        $res .= '<div class="validation-messages"></div>';
+        $res .= '</div>'; // .form
         $res .= '</div>'; // .request-quote
         
         return $res;
diff --git a/js/315-quote.js b/js/315-quote.js
new file mode 100644
index 0000000..ef57c3e
--- /dev/null
+++ b/js/315-quote.js
@@ -0,0 +1,15 @@
+function displayErrors() {
+
+    var errors = [];
+
+    // Collect errors from the form
+    $('.errormessage').each(function () {
+        errors.push($(this).text());
+
+        $('.validation-messages').html(errors.join('<br>')).fadeIn(500, function() {
+            setTimeout(function() {
+                $('.validation-messages').fadeOut(500);
+            }, 3000);
+        });
+    });
+}
\ No newline at end of file
diff --git a/less/001-variables.less b/less/001-variables.less
index 40d9237..83b592a 100644
--- a/less/001-variables.less
+++ b/less/001-variables.less
@@ -15,6 +15,7 @@
 @color-footer-bg-secondary: #161e26;
 @color-green: #8aab41;
 @color-header-grey: #2a3743;
+@color-error: #c91818;
 
 //-- Content and breakpoints
 @mobile-breakpoint: 1024px;
diff --git a/less/315-quote.less b/less/315-quote.less
index d114664..976e100 100644
--- a/less/315-quote.less
+++ b/less/315-quote.less
@@ -6,6 +6,10 @@
     padding-right: 30px;
   }
 
+  .form {
+    position: relative;
+  }
+
   .zend_form {
     display: flex;
     flex-wrap: wrap;
@@ -79,4 +83,45 @@
     }
   }
 
+  // Validation Error Messages
+  .errormessage {
+    display: none; // Will be displayed elsewhere
+  }
+
+  .error dd {
+    position: relative;
+
+    &:after {
+      content: '';
+      position: absolute;
+      left: 0;
+      bottom: 1px;
+      width: 100%;
+      height: 5px;
+      background-color: @color-error;
+    }
+
+    input[type="text"], input[type="email"], select {
+      border-color: @color-text;
+      border-bottom-color: @color-error;
+    }
+
+  }
+
+  .validation-messages {
+    padding: 22px 50px;
+    background-color: #242424;
+    position: absolute;
+    bottom: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+    color:#fff;
+    font-size: 16px;
+    text-align: center;
+    border-radius: 200px;
+    z-index: 1000;
+    pointer-events: none;
+    display: none;
+  }
+
 }
\ No newline at end of file
-- 
2.39.5