From 56de9ac88864d7e7a025701e4cc868a9f33ca28b Mon Sep 17 00:00:00 2001
From: Erik Michaels-Ober <sferik@gmail.com>
Date: Fri, 4 Mar 2011 20:22:03 -0800
Subject: [PATCH] Added validation

---
 app/views/layouts/application.html.erb    | 51 +++++++++++++++++++++--
 app/views/welcome/_adoption_form.html.erb | 36 ----------------
 app/views/welcome/_combo_form.html.erb    | 36 ++++++++++++++++
 public/stylesheets/main.css               |  8 ++++
 4 files changed, 91 insertions(+), 40 deletions(-)
 delete mode 100644 app/views/welcome/_adoption_form.html.erb
 create mode 100644 app/views/welcome/_combo_form.html.erb

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 96802ff..3e61364 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -5,7 +5,7 @@
     <%= stylesheet_link_tag "main" %>
     <%= javascript_include_tag "http://maps.google.com/maps/api/js?sensor=false" %>
     <%= javascript_include_tag "https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" %>
-    <%= javascript_include_tag "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js" %>
+    <%= javascript_include_tag "https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js" %>
     <%= javascript_include_tag "https://github.com/scottschiller/Snowstorm/raw/master/snowstorm-min.js" %>
     <script type="text/javascript">
     $(function() {
@@ -24,7 +24,7 @@
       };
       map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
       var openInfoWindow;
-      var formString = '<%= render(:partial => "adoption_form").gsub("\n", "") %>'
+      var formString = '<%= render(:partial => "combo_form").gsub("\n", "") %>'
       function addMarker(point, color, contentString) {
         var image = new google.maps.MarkerImage(color,
           new google.maps.Size(27.0, 37.0),
@@ -50,6 +50,45 @@
             openInfoWindow.close();
           }
           infoWindow.open(map, marker);
+          $('.combo_form').data('state', 'new');
+          $('.combo_form').submit(function() {
+            if($(this).data('state') === 'new') {
+              if($('.choose_password').val() === '') {
+                $('.choose_password').focus();
+                $('.choose_password_label').addClass('error', 500);
+                $('.choose_password').addClass('error', 500);
+              } else {
+                $('.choose_password_label').removeClass('error', 500);
+                $('.choose_password').removeClass('error', 500);
+              }
+              if($('.name').val() === '') {
+                $('.name').focus();
+                $('.name_label').addClass('error', 500);
+                $('.name').addClass('error', 500);
+              } else {
+                $('.name_label').removeClass('error', 500);
+                $('.name').removeClass('error', 500);
+              }
+            } else if($(this).data('state') === 'existing') {
+              if($('.password').val() === '') {
+                $('.password').focus();
+                $('.password_label').addClass('error', 500);
+                $('.password').addClass('error', 500);
+              } else {
+                $('.password_label').removeClass('error', 500);
+                $('.password').removeClass('error', 500);
+              }
+            }
+            if(!/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]+$/.test($('.email').val())) {
+              $('.email').focus();
+              $('.email_label').addClass('error', 500);
+              $('.email').addClass('error', 500);
+            } else {
+              $('.email_label').removeClass('error', 500);
+              $('.email').removeClass('error', 500);
+            }
+            return false;
+          });
           openInfoWindow = infoWindow;
         });
       }
@@ -64,10 +103,10 @@
       addMarker(point, color, contentString);
 <% end %>
       $('#location_form').submit(function() {
-        if($("#address").val() === "") {
+        if($('#address').val() === '') {
+          $('#address').focus();
           $('#address_label').addClass('error', 500);
           $('#address').addClass('error', 500);
-          $('#address').focus();
           return false;
         } else {
           return true;
@@ -79,17 +118,21 @@
           $('.forgot_password_fields').slideUp();
           $('.account_existing_fields').slideUp();
           $('.account_new_fields').slideDown();
+          $('.combo_form').data('state', 'new');
         } else if('existing' == self.val()) {
           $('.account_new_fields').slideUp();
           $('.account_existing_fields').slideDown(function() {
+          $('.combo_form').data('state', 'existing');
             $('.forgot_password').click(function() {
               $('.account_existing_fields').slideUp();
               $('.forgot_password_fields').slideDown(function() {
                 $('.remembered_password').click(function() {
                   $('.forgot_password_fields').slideUp();
                   $('.account_existing_fields').slideDown();
+                  $('.combo_form').data('state', 'existing');
                 });
               });
+              $('.combo_form').data('state', 'forgot_password');
             });
           });
         }
diff --git a/app/views/welcome/_adoption_form.html.erb b/app/views/welcome/_adoption_form.html.erb
deleted file mode 100644
index cccee2a..0000000
--- a/app/views/welcome/_adoption_form.html.erb
+++ /dev/null
@@ -1,36 +0,0 @@
-<div class="box">
-<h2>Adopt this Hydrant</h2>
-<%= form_tag do %>
-  <div class="common_fields">
-    <%= label_tag "email" %>
-    <%= text_field_tag "email", params[:email], :tabindex => 1 %>
-    <%= label_tag "account_new" , radio_button_tag("account", "new", true, :tabindex => 2).html_safe + "I haven\\'t signed up yet" %><br />
-    <%= label_tag "account_existing", radio_button_tag("account", "existing").html_safe + "I already signed up" %><br />
-  </div>
-  <div class="account_new_fields">
-    <%= label_tag "name" %>
-    <%= text_field_tag "name", params[:name], :tabindex => 3 %>
-    <%= label_tag "organization" %>
-    <%= text_field_tag "organization", params[:organization], :tabindex => 4 %>
-    <%= label_tag "voice_number" %>
-    <%= text_field_tag "voice_number", params[:voice_number], :tabindex => 5 %>
-    <%= label_tag "sms_number", "SMS number" %>
-    <%= text_field_tag "sms_number", params[:sms_number], :tabindex => 6 %>
-    <%= label_tag "password", "Choose a password" %>
-    <%= password_field_tag "password", nil, :tabindex => 7 %>
-    <%= submit_tag "Sign up", :tabindex => 8 %>
-    <p>By signing up you accept the <%= link_to "Terms of Service", "#", :tabindex => 9 %>.</p>
-  </div>
-  <div class="account_existing_fields" style="display: none;">
-    <%= label_tag "password" %>
-    <%= password_field_tag "password", nil, :tabindex => 0 %>
-    <%= label_tag "remember_me", check_box_tag("remember_me", nil, true).html_safe + "Stay signed in" %><br />
-    <%= submit_tag "Sign in", :tabindex => 0 %>
-    <p><%= link_to "Forgot your password?", "#", :class => "forgot_password", :tabindex => 0 %></p>
-  </div>
-  <div class="forgot_password_fields" style="display: none;">
-    <%= submit_tag "Email me my password", :tabindex => 0 %>
-    <p><%= link_to "Never mind. I remembered my password.", "#", :class => "remembered_password", :tabindex => 0 %></p>
-  </div>
-<% end %>
-</div>
diff --git a/app/views/welcome/_combo_form.html.erb b/app/views/welcome/_combo_form.html.erb
new file mode 100644
index 0000000..d3b7ad5
--- /dev/null
+++ b/app/views/welcome/_combo_form.html.erb
@@ -0,0 +1,36 @@
+<div class="box">
+<h2>Adopt this Hydrant</h2>
+<%= form_tag "#", :method => "GET", :class => "combo_form" do %>
+  <div class="common_fields">
+    <%= label_tag "email", "Email address", :class => "email_label" %>
+    <%= text_field_tag "email", nil, :tabindex => 1, :class => "email" %>
+    <%= label_tag "account_new" , radio_button_tag("account", "new", true, :tabindex => 2).html_safe + "I haven\\'t signed up yet" %><br />
+    <%= label_tag "account_existing", radio_button_tag("account", "existing").html_safe + "I already signed up" %><br />
+  </div>
+  <div class="account_new_fields">
+    <%= label_tag "name", "Name", :class => "name_label" %>
+    <%= text_field_tag "name", nil, :tabindex => 3, :class => "name" %>
+    <%= label_tag "organization", "Organization", :class => "organization_label" %>
+    <%= text_field_tag "organization", nil, :tabindex => 4, :class => "organization" %>
+    <%= label_tag "voice_number", "Phone number", :class => "voice_number_label" %>
+    <%= text_field_tag "voice_number", nil, :tabindex => 5, :class => "voice_number" %>
+    <%= label_tag "sms_number", "SMS number", :class => "sms_number_label" %>
+    <%= text_field_tag "sms_number", nil, :tabindex => 6, :class => "sms_number" %>
+    <%= label_tag "choose_password", "Choose a password", :class => "choose_password_label" %>
+    <%= password_field_tag "choose_password", nil, :tabindex => 7, :class => "choose_password" %>
+    <%= submit_tag "Sign up", :tabindex => 8 %>
+    <p>By signing up you accept the <%= link_to "Terms of Service", "#", :tabindex => 9 %>.</p>
+  </div>
+  <div class="account_existing_fields" style="display: none;">
+    <%= label_tag "password", "Password", :class => "password_label" %>
+    <%= password_field_tag "password", nil, :tabindex => 0, :class => "password" %>
+    <%= label_tag "remember_me", (check_box_tag("remember_me", nil, true).html_safe + "Stay signed in"), :class => "remember_me_label" %><br />
+    <%= submit_tag "Sign in", :tabindex => 0 %>
+    <p><%= link_to "Forgot your password?", "#", :class => "forgot_password", :tabindex => 0 %></p>
+  </div>
+  <div class="forgot_password_fields" style="display: none;">
+    <%= submit_tag "Email me my password", :tabindex => 0 %>
+    <p><%= link_to "Never mind. I remembered my password.", "#", :class => "remembered_password", :tabindex => 0 %></p>
+  </div>
+<% end %>
+</div>
diff --git a/public/stylesheets/main.css b/public/stylesheets/main.css
index f672898..6c15be5 100644
--- a/public/stylesheets/main.css
+++ b/public/stylesheets/main.css
@@ -73,3 +73,11 @@ button, input[type="submit"] {
   width: 100%;
   text-align: center;
 }
+
+label.error {
+  color: #c33;
+}
+
+input.error {
+  background-color: #fcc;
+}