validations and all that jazz [ci skip]

app/assets/stylesheets/new_styles/_registration.scss

@@ -3,8 +3,8 @@
   top : 0;
   left : 0;
   background-color : #afc652;
-  height : 100%;
+  min-height : 100%;
-  width : 100%;
+  min-width : 100%;
 
   color : #fff;
 
@@ -16,6 +16,7 @@
     font-family : Roboto-Light;
     font-size : 100px;
     line-height : 100px;
+    white-space : nowrap;
   }
 
   #diaspora-hearts {
@@ -23,6 +24,7 @@
     font-size : 24px;
     margin-top : 0.2em;
     margin-bottom : 1em;
+    white-space : nowrap;
   }
 
   #sign-up-text {
@@ -32,11 +34,10 @@
   }
 
   #collage {
-    float : left;
     width : 344px;
-    height : 639px;
+    height : auto;
-    margin-right : 20px;
+
-    margin-left : 110px;
+    max-width : 95%;
   }
 
   form#user_new {
@@ -46,6 +47,10 @@
       color : #555;
     }
 
+    input:invalid {
+      color : #555;
+    }
+
     fieldset {
       @include border-radius(5px);
 
@@ -78,13 +83,24 @@
 
         .control-label,
         input[type=text],
-        input[type=password] {
+        input[type=password],
+        .field_with_errors label {
           padding : 10px;
           margin : 0;
         }
 
-        .controls { margin-left : 100px; }
+        .controls { margin-left : 100px; position : relative; }
         .control-label { width : 80px; }
+
+        .controls .field_with_errors input {
+          color : #f15534;
+          background : {
+            image : image-url('invalid_fat@2x.png');
+            repeat : no-repeat;
+            position : 197px;
+            size: 20px 20px;
+          }
+        }
       }
     }
 

app/views/registrations/new.html.erb

@@ -1,8 +1,12 @@
 <div id="registration">
   <div class="container">
 
+    <div class="row">
+        <div class="span4" id="image-container">
             <%= image_tag('signupimages@2x_mini.jpg', :id => "collage") %>
+        </div>
 
+        <div class="span8">
             <h1 id="create-something-text">
               HEY,
               <br/>
@@ -19,7 +23,7 @@
               SIGN UP
             </h4>
 
-    <%= form_for(resource, :as => resource_name, :url => registration_path(resource_name), :html => {:class => "form-horizontal", :autocomplete => "off"}) do |f| %>
+            <%= form_for(resource, :as => resource_name, :url => registration_path(resource_name), :html => {:class => "form-horizontal", :autocomplete => "off"}, :validate => true) do |f| %>
                 <fieldset>
                   <div class="control-group">
                     <label class="control-label" for="user_email">
@@ -27,7 +31,7 @@
                     </label>
 
                     <div class="controls">
-                <%= f.email_field :email, :placeholder => "luke@hoth.net", :title => t('registrations.new.enter_email'), :required => true %>
+                        <%= f.email_field :email, :validate => {:presence => true}, :placeholder => "luke@hoth.net", :title => t('registrations.new.enter_email'), :required => true %>
                     </div>
                   </div>
 
@@ -37,7 +41,7 @@
                       </label>
 
                       <div class="controls">
-                <%= f.text_field :username, :placeholder => "jedi_guy", :title => t('registrations.new.enter_username'), :required => true, :pattern => "[A-Za-z0-9_]+" %>
+                        <%= f.text_field :username, :validate => {:presence => true}, :placeholder => "jedi_guy", :title => t('registrations.new.enter_username'), :required => true, :pattern => "[A-Za-z0-9_]+" %>
                       </div>
                   </div>
 
@@ -46,14 +50,16 @@
                         PASSWORD
                     </label>
 
-            <%= f.password_field :password, :placeholder => "••••••••", :title => t('registrations.new.enter_password'), :required => true, :pattern => "......+" %>
+                    <div class="controls">
-              <%= invite_hidden_tag(invite) %>
+                        <%= f.password_field :password, :validate => {:presence => true}, :placeholder => "••••••••", :title => t('registrations.new.enter_password'), :required => true, :pattern => "......+" %>
-
                     </div>
+                  </div>
+                  <%= invite_hidden_tag(invite) %>
                 </fieldset>
 
                 <%= f.submit "Continue", :class => "new-btn" %>
             <% end %>
-
+        </div>
+    </div>
   </div>
 </div>

config/initializers/client_side_validations.rb

@@ -1,14 +1,14 @@
 # ClientSideValidations Initializer
 
-#require 'client_side_validations/simple_form' if defined?(::SimpleForm)
+require 'client_side_validations/simple_form' if defined?(::SimpleForm)
-#require 'client_side_validations/formtastic'  if defined?(::Formtastic)
+require 'client_side_validations/formtastic'  if defined?(::Formtastic)
 
 # Uncomment the following block if you want each input field to have the validation messages attached.
-ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
+# ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
-  unless html_tag =~ /^<label/
+#   unless html_tag =~ /^<label/
-    %{<div class="field_with_errors">#{html_tag}<label for="#{instance.send(:tag_id)}" class="message">#{instance.error_message.first}</label></div>}.html_safe
+#     %{<div class="field_with_errors">#{html_tag}<label for="#{instance.send(:tag_id)}" class="message">#{instance.error_message.first}</label></div>}.html_safe
- else
+#   else
-    %{<div class="field_with_errors">#{html_tag}</div>}.html_safe
+#     %{<div class="field_with_errors">#{html_tag}</div>}.html_safe
-  end
+#   end
-end
+# end