Client side validation on sign up page

app/assets/javascripts/devise/registrations.js

@@ -2,8 +2,8 @@ $(document).ready(function(){
   var MIN_LEN = 3;
   var MAX_SUBMITS = 3;
   var submit_count = 0;
-  $("input[name=commit]").click( function(e){
+
-    console.log("clicked");
+  var checkContacts = function() {
       submit_count += 1;
       //IDs of contact info
       var contact_info_ids = [
@@ -14,8 +14,8 @@ $(document).ready(function(){
           "user_user_profiles_attributes_0_addrZip",
           "user_user_profiles_attributes_0_phone"
       ];
+
       var contact_vals = "";
-    var index = 0;
       //see if any contact info exists
       for( var index in contact_info_ids){
           contact_vals += $("#"+contact_info_ids[index]).val();
@@ -47,5 +47,34 @@ $(document).ready(function(){
           }
           return false;
       }
+  };
+
+  var checkValid = function() {
+      var errors = {};
+      var hasErrors = false;
+      ["username", "first_name", "last_name"].forEach(function(requiredField) {
+          if(!$("#user_" + requiredField).val().trim()) {
+              errors["user_" + requiredField] = ["can't be blank"];
+              hasErrors = true;
+          }
+      });
+
+      if($("#user_password").val().length < 6) {
+          errors["user_password"] = ["is too short (minimum is 6 characters)"];
+          hasErrors = true;
+      }
+
+      if($("#user_password").val() != $("#user_password_confirmation").val()) {
+          errors["user_password_confirmation"] = ["confirmation doesn't match password"];
+          hasErrors = true;
+      }
+
+      displayFormErrors({errors: errors}, "#new_user");
+
+      return !hasErrors;
+  };
+
+  $("input[name=commit]").click(function(e){
+      return checkContacts() && checkValid();
   });
 });

app/assets/javascripts/utils.js

@@ -1,8 +1,10 @@
-function displayFormErrors(data){
+function displayFormErrors(data, form){
+  if(form){
+    $(form).find(".form-group.has-error").removeClass("has-error").find(".help-block").html("");
+  }
   if(data.errors != undefined ){
     $.each(data.errors, function(field, errorMsg) {
-      $("#"+field).closest(".form-group").addClass("has-error");
+      $("#"+field).closest(".form-group").addClass("has-error").find(".help-block").html(errorMsg.join(", "));
-      $("#"+field).siblings(".help-block").html(errorMsg.join(", "));
     });
   }
 }

app/views/devise/registrations/new.html.haml

@@ -7,13 +7,16 @@
 
       %fieldset
         .form-group
-          = f.text_field :username, placeholder: 'Username', class: 'form-control'
+          = f.text_field :username, placeholder: 'Username', class: 'form-control', required: true
+          .help-block
 
         .form-group
-          = f.text_field :first_name, placeholder: 'First Name', class: 'form-control'
+          = f.text_field :first_name, placeholder: 'First Name', class: 'form-control', required: true
+          .help-block
 
         .form-group
-          = f.text_field :last_name, placeholder: 'Last Name', class: 'form-control'
+          = f.text_field :last_name, placeholder: 'Last Name', class: 'form-control', required: true
+          .help-block
 
         .form-group
           = f.email_field :email, placeholder: 'E-mail', class: 'form-control'
@@ -31,10 +34,12 @@
 
       %fieldset
         .form-group
-          = f.password_field :password, placeholder: 'Password', class: 'form-control'
+          = f.password_field :password, placeholder: 'Password', class: 'form-control', required: true
+          .help-block
 
         .form-group
-          = f.password_field :password_confirmation, placeholder: 'Password Confirmation', class: 'form-control'
+          = f.password_field :password_confirmation, placeholder: 'Password Confirmation', class: 'form-control', required: true
+          .help-block
 
         .form-group
           = f.submit 'Sign up', class: 'btn btn-primary'