From ca72edb7e03af2c85a1c0e2f525da2712a32b21a Mon Sep 17 00:00:00 2001 From: Ilya Konanykhin Date: Thu, 26 Jan 2017 15:50:24 +0600 Subject: [PATCH] Client side validation on sign up page --- .../javascripts/devise/registrations.js | 115 +++++++++++------- app/assets/javascripts/utils.js | 8 +- app/views/devise/registrations/new.html.haml | 15 ++- 3 files changed, 87 insertions(+), 51 deletions(-) diff --git a/app/assets/javascripts/devise/registrations.js b/app/assets/javascripts/devise/registrations.js index 89e7d76..4d81ac5 100644 --- a/app/assets/javascripts/devise/registrations.js +++ b/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 ){ - alert("Fine."); + + var checkContacts = function() { + 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; - - }else{ - - switch(submit_count){ - case 1: - alert("It appears you have not entered any contact information. " + - "Please do."); - break; - case 2: - alert("It is highly recommended that you enter at least one form of" + - " contact information. It is in your best interest."); - break; - case 3: - alert("If something happens to your bicycle, we will not be able to" + - " notify you. Please enter at least one form of contact."); - break; - default: - alert("Please enter at least one form of contact."); + if( contact_vals.length >= MIN_LEN || submit_count > MAX_SUBMITS){ + + if( submit_count > MAX_SUBMITS ){ + alert("Fine."); + } + return true; + + }else{ + + switch(submit_count){ + case 1: + alert("It appears you have not entered any contact information. " + + "Please do."); + break; + case 2: + alert("It is highly recommended that you enter at least one form of" + + " contact information. It is in your best interest."); + break; + case 3: + alert("If something happens to your bicycle, we will not be able to" + + " notify you. 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(); }); }); diff --git a/app/assets/javascripts/utils.js b/app/assets/javascripts/utils.js index fff333e..cce11e6 100644 --- a/app/assets/javascripts/utils.js +++ b/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).siblings(".help-block").html(errorMsg.join(", ")); + $("#"+field).closest(".form-group").addClass("has-error").find(".help-block").html(errorMsg.join(", ")); }); } } diff --git a/app/views/devise/registrations/new.html.haml b/app/views/devise/registrations/new.html.haml index 05269ab..62e12b9 100644 --- a/app/views/devise/registrations/new.html.haml +++ b/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'