Merge pull request #1245 from fatfreecrm/validation-improvements

Fix validation issues

app/assets/javascripts/application.js.erb

@@ -17,6 +17,7 @@
 //= require crm_loginout
 //= require crm_tags
 //= require crm_sortable
+//= require crm_validations
 //= require textarea_autocomplete
 //= require crm_textarea_autocomplete
 //= require crm_select2

app/assets/javascripts/crm_validations.js.coffee

@@ -0,0 +1,12 @@
+#------------------------------------------------------------------------------
+(($) ->
+
+  # Ensure that any html5 required fields are unhidden when invalid
+  #----------------------------------------------------------------------------
+  $(document).on 'click', 'form.simple_form input:submit', (event) ->
+    form = this.closest('form')
+    invalidInputs = form.querySelectorAll(':invalid')
+    $(invalidInputs).each ->
+      $(this).closest('.field_group').show()
+
+) jQuery

app/assets/stylesheets/rails.scss

@@ -28,7 +28,7 @@
       padding: 0px; } } }
 
 .fieldWithErrors {
-  input {
+  input, select {
     border: {
       bottom: 1px solid lightpink;
       right: 1px solid lightpink; };

app/views/accounts/_contact_info.html.haml

@@ -1,5 +1,5 @@
 - edit ||= false
-- collapsed = (@account.errors.empty? && session[:account_contact].nil?)
+- collapsed = session[:account_contact].nil?
 = subtitle :account_contact, collapsed, t(:contact_info)
 .section
   %small#account_contact_intro{ hidden_if(!collapsed) }

app/views/accounts/_top_section.html.haml

@@ -2,9 +2,9 @@
   .section
     %table
       %tr
-        %td(colspan="5")
+        %td{class: (@account.errors['name'].present? ? 'fieldWithErrors' : nil)}(colspan="5")
           .label.top.req #{t :name}:
-          = f.text_field :name, autofocus: true, style: "width:500px"
+          = f.text_field :name, autofocus: true, style: "width:500px", required: "required"
       %tr
         %td
           .label #{t :assigned_to}:

app/views/campaigns/_top_section.html.haml

@@ -2,9 +2,9 @@
   .section
     %table
       %tr
-        %td(colspan="5")
+        %td{class: (@campaign.errors['name'].present? ? 'fieldWithErrors' : nil)}(colspan="5")
           .label.top.req #{t :name}:
-          = f.text_field :name, autofocus: true, style: "width:500px"
+          = f.text_field :name, autofocus: true, style: "width:500px", required: "required"
       %tr
         %td
           .label #{t :start_date}:

app/views/contacts/_top_section.html.haml

@@ -3,13 +3,13 @@
   .section
     %table
       %tr
-        %td
-          .label.top.req{ class: "#{Setting.require_first_names ? 'req' : nil}" } #{t :first_name}:
-          = f.text_field :first_name, autofocus: true
+        %td{class: (@contact.errors['first_name'].present? ? 'fieldWithErrors' : nil)}
+          .label.top{ class: "#{Setting.require_first_names ? 'req' : nil}" } #{t :first_name}:
+          = f.text_field :first_name, autofocus: true, required: (Setting.require_first_names ? "required" : nil)
         %td= spacer
-        %td
+        %td{class: (@contact.errors['last_name'].present? ? 'fieldWithErrors' : nil)}
           .label.top{ class: "#{Setting.require_last_names ? 'req' : nil}" } #{t :last_name}:
-          = f.text_field :last_name
+          = f.text_field :last_name, required: (Setting.require_last_names ? "required" : nil)
       %tr
         %td
           .label #{t :email}:

app/views/fields/_group.html.haml

@@ -1,6 +1,9 @@
 - if field_group.name != 'custom_fields'
-  -# start a new section
-  - collapsed = session[field_group.key].nil?
+  - # Ensure field groups containing validation errors are expanded
+  - required_field_names = field_group.fields.select(&:required?).map(&:name)
+  - fields_with_errors = f.object.errors.map{|e| e.attribute.to_s}
+  - force_open = (required_field_names & fields_with_errors).any?
+  - collapsed = session[field_group.key].nil? && !force_open
   %div{ id: "#{field_group.key}_container", :"data-tag" => field_group.tag.try(:name) }
     = subtitle field_group.key, collapsed, t(field_group.name, default: field_group.label)
     .section

app/views/fields/_group_table.html.haml

@@ -2,13 +2,13 @@
   - field_group.fields.without_pairs.in_groups_of(2, false) do |group|
     %tr
       - group.each_with_index do |field, i|
-        %td
+        %td{class: (f.object.errors[field.name].present? ? 'fieldWithErrors' : nil)}
           - if field.hint.present?
             = image_tag "info_tiny.png", title: field.hint, class: "tooltip-icon"
           - if field.as == 'check_boxes'
             - value = f.object.send(field.name)
             - checked = YAML.load(value.to_s)
-          .label.top
+          .label.top{class: (field.required? ? 'req': nil)}
             = "#{field.label}:"
           = f.input_field field.name, field.input_options.merge(checked: checked)
         - if i == 0

app/views/leads/_top_section.html.haml

@@ -3,13 +3,13 @@
   .section
     %table
       %tr
-        %td
+        %td{ class: (@lead.errors['first_name'].present? ? 'fieldWithErrors' : nil)}
           .label.top{ class: "#{Setting.require_first_names ? 'req' : nil}" } #{t :first_name}:
-          = f.text_field :first_name, autofocus: true
+          = f.text_field :first_name, autofocus: true, required: (Setting.require_first_names ? "required" : nil)
         %td= spacer
-        %td
+        %td{ class: (@lead.errors['last_name'].present? ? 'fieldWithErrors' : nil)}
           .label.top{ class: "#{Setting.require_last_names ? 'req' : nil}" } #{t :last_name}:
-          = f.text_field :last_name
+          = f.text_field :last_name, required: (Setting.require_last_names ? "required" : nil)
       %tr
         %td
           .label #{t :email}:

app/views/opportunities/_top_section.html.haml

@@ -2,9 +2,9 @@
   .section
     %table
       %tr
-        %td
+        %td{class: (@opportunity.errors['name'].present? ? 'fieldWithErrors' : nil)}
           .label.req.top #{t :name}:
-          = f.text_field :name, autofocus: true, style: "width:325px"
+          = f.text_field :name, autofocus: true, style: "width:325px", required: "required"
         %td= spacer
         %td
           .label.req.top #{t :stage}:

app/views/shared/_add_comment.html.haml

@@ -1,5 +1,5 @@
 - edit ||= false
-- collapsed = @comment_body.nil?  && f.object.errors.empty?
+- collapsed = session[:comment].nil?
 = subtitle :comment, collapsed, t(:comment)
 .section
   %small#comment_intro{ hidden_if(!collapsed) }

app/views/tasks/_top_section.html.haml

@@ -3,10 +3,10 @@
     %tr
       %td(colspan="5")
         .label.top.req #{t :name}:
-        = f.text_field :name, autofocus: true, style: "width:500px"
+        = f.text_field :name, autofocus: true, style: "width:500px", required: "required"
     %tr
       %td
-        .label.req #{t :due}:
+        .label #{t :due}:
         - bucket = (params[:bucket].blank? ? @task.bucket : params[:bucket]) || "due_asap"
         - with_time = Setting.task_calendar_with_time
         - if @task.bucket != "specific_time"
@@ -18,11 +18,11 @@
           = f.text_field :calendar, value: f.object.due_at.strftime(fmt), style: "width:160px;", autocomplete: :off, class: (with_time ? 'datetime' : 'date')
       %td= spacer
       %td
-        .label.req #{t :assign_to}:
+        .label #{t :assign_to}:
         = user_select(:task, all_users, current_user)
       %td= spacer
       %td
-        .label.req #{t :category}:
+        .label #{t :category}:
         = f.select :category, @category, { selected: @task.category.blank? ? nil : @task.category.to_sym, include_blank: t(:select_blank) }, { style: "width:160px", class: 'select2' }
 
     - if Setting.background_info && Setting.background_info.include?(:task)