Add error output for newsletter forms

drewbarontini · drewbarontini · commit 5d8c3c2eabb0 · 2015-06-16T12:32:27.000-04:00
diff --git a/client/javascripts/components/modules/newsletter.js b/client/javascripts/components/modules/newsletter.js
@@ -21,7 +21,9 @@ JS.Modules.Newsletter = (function() {
     _settings = $.extend({
       $element            : $('.js-newsletter'),
       $form               : $('.js-newsletter-form'),
+      $error              : $('.js-newsletter-error'),
       submittedClass      : 'is-submitted',
+      hiddenClass         : 'is-hidden',
       newsletterTextClass : 'newsletter-text',
       newsletterTextCopy  : "Thanks! You're all set to receive the latest JavaScript&nbsp;news."
     }, options);
@@ -34,18 +36,38 @@ JS.Modules.Newsletter = (function() {
   // -------------------------------------
 
   var _submitForm = function() {
-    $.post('/subscribe', _settings.$form.serialize());
+    $.post('/subscribe', _settings.$form.serialize(), function(results) {
+      if (results.error) {
+        _updateInterface('error', results.error.error);
+      } else {
+        _updateInterface('success');
+      }
+    });
   };
 
   // -------------------------------------
   //   Update Interface
   // -------------------------------------
 
-  var _updateInterface = function() {
+  var _updateInterface = function(type, message) {
+    var newsletterTextCopy;
+
+    if (message !== undefined) {
+      newsletterTextCopy = message;
+    } else {
+      newsletterTextCopy = _settings.newsletterTextCopy;
+    }
+
     _settings.$form.find('input').prop('disabled', true);
 
-    _settings.$element.addClass(_settings.submittedClass);
-    _settings.$element.append("<p class='" + _settings.newsletterTextClass + "'>" + _settings.newsletterTextCopy + "</p>");
+    if (type === 'success') {
+      _settings.$element.addClass(_settings.submittedClass);
+      _settings.$element.append("<p class='" + _settings.newsletterTextClass + "'>" + newsletterTextCopy + "</p>");
+    } else {
+      _settings.$error
+        .text(newsletterTextCopy)
+        .removeClass(_settings.hiddenClass);
+    }
   };
 
   // -------------------------------------
@@ -57,7 +79,6 @@ JS.Modules.Newsletter = (function() {
       event.preventDefault();
 
       _submitForm();
-      _updateInterface();
     });
   };
 
diff --git a/server/views/news/index.jade b/server/views/news/index.jade
@@ -111,8 +111,10 @@ block content
               p.tcs.tss Subscribe now to the weekly 5 Minutes of JavaScript newsletter.
 
               .newsletter.js-newsletter
-                form.form.form--inline.newsletter-form.tar.js-newsletter-form
+                form.form.form--inline.newsletter-form.js-newsletter-form
                   fieldset.form-field.mbs
                     input.form-input(type='email' name='email' placeholder='Email Address' required)
+                    p.mbf.mts.tce.tsxs.is-hidden.js-newsletter-error
 
-                  input.btn.btn--b.btn--block.btn--m--inline.form-btn(type='submit' value='Subscribe')
+                  .tar
+                    input.btn.btn--b.btn--block.btn--m--inline.form-btn(type='submit' value='Subscribe')
diff --git a/server/views/partials/_newsletter_form.jade b/server/views/partials/_newsletter_form.jade
@@ -5,6 +5,7 @@
         .g-b.g-b--s--3of5
 
           input.form-input.form-input--inline.mbs.mbf--m(type='email' name='email' placeholder='Email Address' required)
+          p.mbf.mts.tce.tsxs.is-hidden.js-newsletter-error
 
         .g-b.g-b--s--2of5
 
