Client side validation on sign up page

app/assets/javascripts/devise/registrations.js

@@ -2,50 +2,79 @@ $(document).ready(function(){
   var MIN_LEN = 3;
   var MAX_SUBMITS = 3;
   var submit_count = 0;
-  $("input[name=commit]").click( function(e){
-    console.log("clicked");
-    submit_count += 1;
-    //IDs of contact info
-    var contact_info_ids = [
-      "user_email",
-      "user_user_profiles_attributes_0_addrStreet1",
-      "user_user_profiles_attributes_0_addrCity",
-      "user_user_profiles_attributes_0_addrState",
-      "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();
-    }
-    if( contact_vals.length >= MIN_LEN || submit_count > MAX_SUBMITS){
 
-      if( submit_count > MAX_SUBMITS ){
+  var checkContacts = function() {
-        alert("Fine.");
+      submit_count += 1;
+      //IDs of contact info
+      var contact_info_ids = [
+          "user_email",
+          "user_user_profiles_attributes_0_addrStreet1",
+          "user_user_profiles_attributes_0_addrCity",
+          "user_user_profiles_attributes_0_addrState",
+          "user_user_profiles_attributes_0_addrZip",
+          "user_user_profiles_attributes_0_phone"
+      ];
+
+      var contact_vals = "";
+      //see if any contact info exists
+      for( var index in contact_info_ids){
+          contact_vals += $("#"+contact_info_ids[index]).val();
       }
-      return true;
+      if( contact_vals.length >= MIN_LEN || submit_count > MAX_SUBMITS){
 
-    }else{
+          if( submit_count > MAX_SUBMITS ){
+              alert("Fine.");
+          }
+          return true;
 
-      switch(submit_count){
+      }else{
-        case 1:
+
-          alert("It appears you have not entered any contact information.  " +
+          switch(submit_count){
-            "Please do.");
+              case 1:
-          break;
+                  alert("It appears you have not entered any contact information.  " +
-        case 2:
+                      "Please do.");
-          alert("It is highly recommended that you enter at least one form of" +
+                  break;
-            " contact information.  It is in your best interest.");
+              case 2:
-          break;
+                  alert("It is highly recommended that you enter at least one form of" +
-        case 3:
+                      " contact information.  It is in your best interest.");
-          alert("If something happens to your bicycle, we will not be able to" +
+                  break;
-            " notify you.  Please enter at least one form of contact.");
+              case 3:
-          break;
+                  alert("If something happens to your bicycle, we will not be able to" +
-        default:
+                      " notify you.  Please enter at least one form of contact.");
-          alert("Please enter at least one form of contact.");
+                  break;
+              default:
+                  alert("Please enter at least one form of contact.");
+          }
+          return false;
       }
-      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'