Add javascript validation to edit user profile, change README

- Add note to add states and cities information Signed-off-by: Parley Martins <parley@outlook.com> Signed-off-by: Gustavo Jaruga <darksshades@gmail.com>

Add javascript validation to edit user profile, change README
- Add note to add states and cities information Signed-off-by: Parley Martins <parley@outlook.com> Signed-off-by: Gustavo Jaruga <darksshades@gmail.com>
Gust · Fabio Teixeira
1 parent 9e654d48
Showing 3 changed files with 92 additions and 52 deletions Show diff stats
README.md
public/mpog-user-validations.js
views/person_editor_extras.html.erb
@@ -21,6 +21,8 @@ Activate Plugin
 As a Noosfero administrator user, go to administrator panel:
+- Execute the command to allow city and states to show up:
+  psql -U USERNAME -d NOOSFERO_DATABASE -a -f db/brazil_national_regions.sql
 - Click on "Enable/disable plugins" option
 - Click on "MPOG Software Plugin" check-box
@@ -126,10 +126,12 @@
       if( (typeof jQuery("#profile_data_cell_phone").data("rawMaskFn") === 'undefined') ) {
         jQuery("#profile_data_cell_phone").mask("(99) 9999?9-9999");
         jQuery("#profile_data_comercial_phone").mask("(99) 9999?9-9999");
+        jQuery("#profile_data_contact_phone").mask("(99) 9999?9-9999");
       }
     } else {
       jQuery("#profile_data_cell_phone").unmask();
       jQuery("#profile_data_comercial_phone").unmask();
+      jQuery("#profile_data_contact_phone").unmask();
     }
   }
@@ -147,75 +149,103 @@
     });
   }
-  function set_full_name_validation() {
-    // Sorry, I know its ugly. But I cant get ([^\w\*\s*])|(^|\s)([a-z]|[0-9])
-    // to ignore Brazilian not so much special chars in names
-    function replace_some_special_chars(text) {
-      return text.replace(/([áàâãéèêíïóôõöú])/g, function(value){
-        if( ["á","à","â","ã"].indexOf(value) != -1 )
-          return "a";
-        else if( ["é","è","ê"].indexOf(value) != -1 )
-          return "e";
-        else if( ["í","ï"].indexOf(value) != -1 )
-          return "i";
-        else if ( ["ó","ô","õ","ö"].indexOf(value) != -1 )
-          return "o";
-        else if( ["ú"].indexOf(value) != -1 )
-          return "u";
-        else
-          return value;
-      });
-    }
+  // Sorry, I know its ugly. But I cant get ([^\w\*\s*])|(^|\s)([a-z]|[0-9])
+  // to ignore Brazilian not so much special chars in names
+  function replace_some_special_chars(text) {
+    return text.replace(/([áàâãéèêíïóôõöú])/g, function(value){
+      if( ["á","à","â","ã"].indexOf(value) != -1 )
+        return "a";
+      else if( ["é","è","ê"].indexOf(value) != -1 )
+        return "e";
+      else if( ["í","ï"].indexOf(value) != -1 )
+        return "i";
+      else if ( ["ó","ô","õ","ö"].indexOf(value) != -1 )
+        return "o";
+      else if( ["ú"].indexOf(value) != -1 )
+        return "u";
+      else
+        return value;
+    });
+  }
-    function is_invalid_formated(text) {
-      var full_validation = /([^\w\*\s*])|(^|\s)([a-z]|[0-9])/; // no special chars and do not initialize with no capital latter
-      var partial_validation = /[^\w\*\s*]/; // no special chars
-      text = replace_some_special_chars(text);
-      var slices = text.split(" ");
-      var invalid = false;
-
-      for(var i = 0; i < slices.length; i++) {
-        if( slices[i].length > 3 ) {
-          invalid = full_validation.test(slices[i]);
-        } else {
-          invalid = partial_validation.test(slices[i]);
-        }
+  function is_invalid_formated(text) {
+    var full_validation = /([^\w\*\s*])|(^|\s)([a-z]|[0-9])/; // no special chars and do not initialize with no capital latter
+    var partial_validation = /[^\w\*\s*]/; // no special chars
+    text = replace_some_special_chars(text);
+    var slices = text.split(" ");
+    var invalid = false;
-        if(invalid) break;
+    for(var i = 0; i < slices.length; i++) {
+      if( slices[i].length > 3 ) {
+        invalid = full_validation.test(slices[i]);
+      } else {
+        invalid = partial_validation.test(slices[i]);
       }
-      return invalid;
+      if(invalid) break;
     }
-    function show_full_name_error_message() {
-      var field = jQuery("#profile_data_name");
+    return invalid;
+  }
-      field.removeClass("validated").addClass("invalid");
+  jQuery("#profile_data_name").blur(function(){
+    jQuery(this).attr("class", "");
-      if(!jQuery(".full_name_error")[0]) {
-        var message = jQuery("#full_name_error").val();
-        field.parent().append("<span class='full_name_error'>"+message+"</span>");
-      } else {
-        jQuery(".full_name_error").show();
-      }
+    if( this.value.length > 0 && is_invalid_formated(this.value) ) {
+      show_full_name_error_message();
+    } else {
+      hide_full_name_error_message();
     }
+  });
+
-    function hide_full_name_error_message() {
-      jQuery("#profile_data_name").removeClass("invalid").addClass("validated");
-      jQuery(".full_name_error").hide();
+  // Generic
+  function show_plugin_error_message(field_id, hidden_message_id ) {
+    var field = jQuery("#"+field_id);
+
+    field.removeClass("validated").addClass("invalid");
+
+    if(!jQuery("." + hidden_message_id)[0]) {
+      var message = jQuery("#" + hidden_message_id).val();
+      field.parent().append("<div class='" + hidden_message_id + " errorExplanation'>"+message+"</span>");
+    } else {
+      jQuery("." + hidden_message_id).show();
     }
+  }
-    jQuery("#profile_data_name").blur(function(){
+  function hide_plugin_error_message(field_id, hidden_message_id) {
+    jQuery("#" + field_id).removeClass("invalid").addClass("validated");
+    jQuery("." + hidden_message_id).hide();
+  }
+  function addBlurFields(field_id, hidden_message_id, validation_function) {
+    jQuery("#" + field_id).blur(function(){
       jQuery(this).attr("class", "");
-      if( this.value.length > 0 && is_invalid_formated(this.value) ) {
-        show_full_name_error_message();
+      if( this.value.length > 0 && validation_function(this.value) ) {
+        show_plugin_error_message(field_id, hidden_message_id);
       } else {
-        hide_full_name_error_message();
+        hide_plugin_error_message(field_id, hidden_message_id);
       }
     });
   }
+  function invalid_email_validation(value)
+  {
+    var correct_format_regex = new RegExp(/^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/);
+
+    return !correct_format_regex.test(value)
+  }
+
+  function invalid_site_validation(value)
+  {
+    var correct_format_regex = new RegExp(/^http[s]{0,1}:\/\/[\w*\.]*/);
+
+    return !correct_format_regex.test(value)
+  }
+
+  //End generic
+
+
   jQuery(document).ready(function(){
     var selectFieldChoices = new SelectFieldChoices();
     set_initial_form_custom_data(selectFieldChoices);
@@ -246,6 +276,13 @@
     fix_phone_mask_format("#profile_data_cell_phone");
     fix_phone_mask_format("#profile_data_comercial_phone");
+    fix_phone_mask_format("#profile_data_contact_phone");
+
+    addBlurFields("profile_data_name", "full_name_error", is_invalid_formated)
+    addBlurFields("profile_data_email", "email_error", invalid_email_validation)
+    addBlurFields("user_secondary_email", "email_error", invalid_email_validation)
+    addBlurFields("profile_data_personal_website", "site_error", invalid_site_validation)
+    addBlurFields("profile_data_organization_website", "site_error", invalid_site_validation)
     window.setTimeout(function(){
       /*
@@ -253,7 +290,6 @@
       Then, to override an application.js validation, this code waits for 2 seconds.
       Or else, application.js validation override this validation
       */
-      set_full_name_validation();
     }, 2000);
   });
 })();
@@ -33,4 +33,6 @@
   </ul>
 </div>
-<%= hidden_field_tag("full_name_error", _("Should begin with a capital letter and no special characters")) %>
 \ No newline at end of file
+<%= hidden_field_tag("full_name_error", _("Should begin with a capital letter and no special characters")) %>
+<%= hidden_field_tag("email_error", _("Email should have the following format: name@host.br")) %>
+<%= hidden_field_tag("site_error", _("Site should have a valid format: http://name.hosts")) %>
 \ No newline at end of file
	@@ -21,6 +21,8 @@ Activate Plugin		@@ -21,6 +21,8 @@ Activate Plugin
21		21
22	As a Noosfero administrator user, go to administrator panel:	22	As a Noosfero administrator user, go to administrator panel:
23		23
		24	+- Execute the command to allow city and states to show up:
		25	+ psql -U USERNAME -d NOOSFERO_DATABASE -a -f db/brazil_national_regions.sql
24	- Click on "Enable/disable plugins" option	26	- Click on "Enable/disable plugins" option
25	- Click on "MPOG Software Plugin" check-box	27	- Click on "MPOG Software Plugin" check-box
26		28