Improve validation error message display on quote form. WIP #482 @2

diff --git a/framework/application/controllers/AjaxController.php b/framework/application/controllers/AjaxController.php
index dd23b5aefe4842749c6494785619a319b3261ef9..1015ddb64c4324e1cb25507afa669699d14d8752 100644 (file)
--- 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 72c62dfe4ea25c9ef6cd0b8ef34fd37dd0de1d19..bbbdeba7f05a174f07da20213ab5a56b361e35c1 100644 (file)
--- 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 3a9079377d71f5cc5f1ddbbf85bb1be6336855aa..69bb6650907574726db3ad15be0900132f059b59 100644 (file)
--- 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 (file)
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 40d9237bd53acfad7217719fecf3aaa6d3aa7cc2..83b592a5549fc8ea2c2a34721fe2abbecb0b93c7 100644 (file)
--- 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 d114664b056c8a8783b3f116b0c8f97cad739b26..976e100b2570ffa2614faca43784bc550afbd360 100644 (file)
--- 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