From fc0afae51c27f80e1f99bc292170b0aea5baa22a Mon Sep 17 00:00:00 2001
From: Rob H <oeoeaio@gmail.com>
Date: Sun, 24 Aug 2014 18:46:14 +1000
Subject: [PATCH] Adding form validation to contact page

---
 .../templates/registration/address.html.haml   | 10 ++++------
 .../templates/registration/contact.html.haml   | 18 ++++++++++--------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/app/assets/javascripts/templates/registration/address.html.haml b/app/assets/javascripts/templates/registration/address.html.haml
index 0d6fdb90a0..6fe39e9285 100644
--- a/app/assets/javascripts/templates/registration/address.html.haml
+++ b/app/assets/javascripts/templates/registration/address.html.haml
@@ -2,9 +2,7 @@
   .header
     %h2
       Greetings
-      %span.brick{ ng: { show: "enterprise.is_distributor" } }
-        {{ enterprise.name }}
-      %span.turquoise{ ng: { show: "!enterprise.is_distributor" } }
+      %span{ ng: { class: "{brick: enterprise.is_distributor, turquoise: !enterprise.is_distributor}" } }
         {{ enterprise.name }}
 
     %h5 Now we need to know where you are
@@ -24,18 +22,18 @@
             %input.chunky.small-12.columns{ id: 'enterprise_city', name: 'city', required: true, placeholder: "eg. Northcote", ng: { model: 'enterprise.address.city' } }
             %span.error.small-12.columns{ ng: { show: "address.city.$error.required && submitted" } }
               You need to enter a suburb.
-          .small-12.large-4.columns
+          .small-12.large-4.columns.field
             %label{ for: 'enterprise_zipcode' } Postcode:
             %input.chunky.small-12.columns{ id: 'enterprise_zipcode', name: 'zipcode', required: true, placeholder: "eg. 3070", ng: { model: 'enterprise.address.zipcode' } }
             %span.error.small-12.columns{ ng: { show: "address.zipcode.$error.required && submitted" } }
               You need to enter a postcode.
         .row
-          .small-12.large-8.columns
+          .small-12.large-8.columns.field
             %label{ for: 'enterprise_country' } Country:
             %select.chunky.small-12.columns{ id: 'enterprise_country', name: 'country', required: true, ng: { model: 'enterprise.country', options: 'c as c.name for c in countries' } }
             %span.error.small-12.columns{ ng: { show: "address.country.$error.required && submitted" } }
               You need to enter a country.
-          .small-12.large-4.columns
+          .small-12.large-4.columns.field
             %label{ for: 'enterprise_state' } State:
             %select.chunky.small-12.columns{ id: 'enterprise_state', name: 'state', ng: { model: 'enterprise.address.state_id', options: 's.id as s.abbr for s in enterprise.country.states', show: 'countryHasStates()', required: 'countryHasStates()' } }
             %span.error.small-12.columns{ ng: { show: "address.state.$error.required && submitted" } }
diff --git a/app/assets/javascripts/templates/registration/contact.html.haml b/app/assets/javascripts/templates/registration/contact.html.haml
index 8d45501d4a..ea2c51263a 100644
--- a/app/assets/javascripts/templates/registration/contact.html.haml
+++ b/app/assets/javascripts/templates/registration/contact.html.haml
@@ -3,26 +3,28 @@
     %h2 Last step to create your enterprise!
     %h5
       Who is responsible for managing
-      %span.brick{"ng-show" => "enterprise.is_distributor"}
-        {{ enterprise.name }}
-      %span.turquoise{"ng-show" => "!enterprise.is_distributor" }
+      %span{ ng: { class: "{brick: enterprise.is_distributor, turquoise: !enterprise.is_distributor}" } }
         {{ enterprise.name }}
   %ng-include{ src: "'registration/steps.html'" }
-  %form
+  %form{ name: 'contact', novalidate: true, ng: { controller: "RegistrationFormCtrl", submit: "create(contact)" } }
     .row.content
       .small-12.medium-12.large-7.columns
         .row
           .small-12.columns.field
             %label{ for: 'enterprise_contact' } Primary Contact:
-            %input.chunky.small-12.columns{ id: 'enterprise_contact', placeholder: "Contact Name", ng: { model: 'enterprise.contact' } }
+            %input.chunky.small-12.columns{ id: 'enterprise_contact', name: 'contact', required: true, placeholder: "Contact Name", ng: { model: 'enterprise.contact' } }
+            %span.error.small-12.columns{ ng: { show: "contact.contact.$error.required && submitted" } }
+              You need to enter a primary contact.
         .row
           .small-12.columns.field
             %label{ for: 'enterprise_email' } Email address:
-            %input.chunky.small-12.columns{ id: 'enterprise_email', placeholder: "eg. charlie@thefarm.com", ng: { model: 'enterprise.email' } }
+            %input.chunky.small-12.columns{ id: 'enterprise_email', name: 'email', type: 'email', required: true, placeholder: "eg. charlie@thefarm.com", ng: { model: 'enterprise.email' } }
+            %span.error.small-12.columns{ ng: { show: "(contact.email.$error.email || contact.email.$error.required) && submitted" } }
+              You need to enter valid email address.
         .row
           .small-12.columns.field
             %label{ for: 'enterprise_phone' } Phone number:
-            %input.chunky.small-12.columns{ id: 'enterprise_phone', placeholder: "eg. (03) 1234 5678", ng: { model: 'enterprise.phone' } }
+            %input.chunky.small-12.columns{ id: 'enterprise_phone', name: 'phone', placeholder: "eg. (03) 1234 5678", ng: { model: 'enterprise.phone' } }
       .small-12.medium-12.large-5.hide-for-small-only
         / %h6
         /   Contact display
@@ -41,4 +43,4 @@
       .small-12.columns
         %input.button.secondary{ type: "button", value: "Back", ng: { click: "select('address')" } }
         &nbsp;
-        %input.button.primary{ type: "button", value: "Continue", ng: { click: "create()" } }
+        %input.button.primary{ type: "submit", value: "Continue" }