From d76d166357c8eb1f7ae1e38c60d603c1b39b5caa Mon Sep 17 00:00:00 2001
From: Moncef Belyamani <giter@done>
Date: Thu, 4 Sep 2014 01:24:27 -0400
Subject: [PATCH] Highlight fields with errors & update validations.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes #188.

Rails automatically surrounds a field that failed to pass validations
with a div that has a class called `field_with_errors`. For some
reason, this doesn’t get added to serialized fields, so I had to write
custom methods in `form_helper.rb`.

I also updated the HTML for some of the fields so that the highlighted
field would retain the same appearance as the regular field.

While working on this, I realized some of the model validations could
be refactored and simplified.
---
 app/assets/stylesheets/application.css.scss   | 10 ++++++++++
 app/helpers/admin/form_helper.rb              |  9 +++++++++
 app/models/location.rb                        | 12 +++---------
 app/models/organization.rb                    |  5 +----
 app/models/service.rb                         | 19 ++-----------------
 app/validators/email_validator.rb             |  3 ++-
 app/validators/service_area_validator.rb      | 10 ++++++++++
 app/validators/url_validator.rb               |  1 +
 .../forms/_admin_email_fields.html.haml       |  2 +-
 .../locations/forms/_admin_emails.html.haml   |  4 ++--
 .../locations/forms/_description.html.haml    |  2 +-
 .../admin/locations/forms/_emails.html.haml   |  2 +-
 .../locations/forms/_location_name.html.haml  |  6 ++++--
 .../locations/forms/_short_desc.html.haml     |  2 +-
 .../admin/locations/forms/_urls.html.haml     |  4 +++-
 .../admin/organizations/forms/_name.html.haml |  6 ++++--
 .../admin/organizations/forms/_urls.html.haml |  4 +++-
 .../services/forms/_description.html.haml     |  2 +-
 .../admin/services/forms/_name.html.haml      |  6 ++++--
 .../services/forms/_service_areas.html.haml   |  4 +++-
 .../admin/services/forms/_urls.html.haml      |  4 +++-
 config/locales/en.yml                         |  1 +
 spec/api/patch_service_spec.rb                |  2 +-
 .../locations/update_admin_emails_spec.rb     | 15 ++++++++++++++-
 .../admin/locations/update_emails_spec.rb     | 13 +++++++++++++
 .../admin/locations/update_name_spec.rb       |  1 +
 .../admin/locations/update_urls_spec.rb       | 13 +++++++++++++
 .../admin/organizations/update_urls_spec.rb   | 13 +++++++++++++
 .../services/update_service_areas_spec.rb     | 16 +++++++++++++++-
 .../admin/services/update_urls_spec.rb        | 14 ++++++++++++++
 spec/models/service_spec.rb                   |  6 +-----
 31 files changed, 155 insertions(+), 56 deletions(-)
 create mode 100644 app/validators/service_area_validator.rb

diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
index 428180ad1..e70203c6e 100644
--- a/app/assets/stylesheets/application.css.scss
+++ b/app/assets/stylesheets/application.css.scss
@@ -92,6 +92,16 @@
   margin: 10px 0px 15px 10px;
 }
 
+// Adds a red border around invalid input fields after form submission.
+.field_with_errors
+{
+  input, textarea
+  {
+    border-color: red;
+    border-width: 2px;
+  }
+}
+
 .accessibility
 {
   input { margin-top: 4px; }
diff --git a/app/helpers/admin/form_helper.rb b/app/helpers/admin/form_helper.rb
index 16579c3d9..4097adc9d 100644
--- a/app/helpers/admin/form_helper.rb
+++ b/app/helpers/admin/form_helper.rb
@@ -33,5 +33,14 @@ def nested_categories(categories)
         end
       end.join.html_safe
     end
+
+    def error_class_for(model, attribute, field)
+      return if model.errors[attribute].blank?
+      'field_with_errors' if field_contains_errors?(model, attribute, field)
+    end
+
+    def field_contains_errors?(model, attribute, field)
+      model.errors[attribute].select { |error| error.include?(field) }.present?
+    end
   end
 end
diff --git a/app/models/location.rb b/app/models/location.rb
index 33ff58773..5e0dee548 100644
--- a/app/models/location.rb
+++ b/app/models/location.rb
@@ -67,15 +67,9 @@ class Location < ActiveRecord::Base
   # For example, the urls field is an array that can contain multiple URLs.
   # To be able to validate each URL in the array, we have to use a
   # custom array validator. See app/validators/array_validator.rb
-  validates :urls, array: {
-    format: { with: %r{\Ahttps?://([^\s:@]+:[^\s:@]*@)?[A-Za-z\d\-]+(\.[A-Za-z\d\-]+)+\.?(:\d{1,5})?([\/?]\S*)?\z}i,
-              message: "%{value} #{I18n.t('errors.messages.invalid_url')}",
-              allow_blank: true } }
-
-  validates :emails, :admin_emails, array: {
-    format: { with: /\A([^@\s]+)@((?:(?!-)[-a-z0-9]+(?<!-)\.)+[a-z]{2,})\z/i,
-              message: "%{value} #{I18n.t('errors.messages.invalid_email')}",
-              allow_blank: true } }
+  validates :urls, array: { url: true }
+
+  validates :emails, :admin_emails, array: { email: true }
 
   # Only call Google's geocoding service if the address has changed
   # to avoid unnecessary requests that affect our rate limit.
diff --git a/app/models/organization.rb b/app/models/organization.rb
index f6aa2cdce..4baa2e63d 100644
--- a/app/models/organization.rb
+++ b/app/models/organization.rb
@@ -12,10 +12,7 @@ class Organization < ActiveRecord::Base
   # For example, the urls field is an array that can contain multiple URLs.
   # To be able to validate each URL in the array, we have to use a
   # custom array validator. See app/validators/array_validator.rb
-  validates :urls, array: {
-    format: { with: %r{\Ahttps?://([^\s:@]+:[^\s:@]*@)?[A-Za-z\d\-]+(\.[A-Za-z\d\-]+)+\.?(:\d{1,5})?([\/?]\S*)?\z}i,
-              message: "%{value} #{I18n.t('errors.messages.invalid_url')}",
-              allow_blank: true } }
+  validates :urls, array: { url: true }
 
   serialize :urls, Array
 
diff --git a/app/models/service.rb b/app/models/service.rb
index ff79e2a78..730818d3a 100644
--- a/app/models/service.rb
+++ b/app/models/service.rb
@@ -14,14 +14,9 @@ class Service < ActiveRecord::Base
   validates :name, :description, :location,
             presence: { message: I18n.t('errors.messages.blank_for_service') }
 
-  validates :urls, array: {
-    format: { with: %r{\Ahttps?://([^\s:@]+:[^\s:@]*@)?[A-Za-z\d\-]+(\.[A-Za-z\d\-]+)+\.?(:\d{1,5})?([\/?]\S*)?\z}i,
-              message: "%{value} #{I18n.t('errors.messages.invalid_url')}",
-              allow_blank: true } }
+  validates :urls, array: { url: true }
 
-  validate :service_area_format, if: (proc do |s|
-    s.service_areas.is_a?(Array) && SETTINGS[:valid_service_areas].present?
-  end)
+  validates :service_areas, array: { service_area: true }
 
   auto_strip_attributes :audience, :description, :eligibility, :fees,
                         :how_to_apply, :name, :short_desc, :wait
@@ -33,14 +28,4 @@ class Service < ActiveRecord::Base
   serialize :keywords, Array
   serialize :service_areas, Array
   serialize :urls, Array
-
-  def service_area_format
-    return unless service_areas.present?
-    valid_service_areas = SETTINGS[:valid_service_areas]
-    return unless (service_areas - valid_service_areas).size != 0
-    error_message = 'At least one service area is improperly formatted, ' \
-      'or is not an accepted city or county name. Please make sure all ' \
-      'words are capitalized.'
-    errors.add(:service_areas, error_message)
-  end
 end
diff --git a/app/validators/email_validator.rb b/app/validators/email_validator.rb
index 3e5546d37..a75a92354 100644
--- a/app/validators/email_validator.rb
+++ b/app/validators/email_validator.rb
@@ -1,8 +1,9 @@
 class EmailValidator < ActiveModel::EachValidator
   def validate_each(record, attribute, value)
+    return if value.blank?
     default_message = "#{value} #{I18n.t('errors.messages.invalid_email')}"
 
-    unless value =~ /.+@.+\..+/i
+    unless value =~ /\A([^@\s]+)@((?:(?!-)[-a-z0-9]+(?<!-)\.)+[a-z]{2,})\z/i
       record.errors[attribute] << (options[:message] || default_message)
     end
   end
diff --git a/app/validators/service_area_validator.rb b/app/validators/service_area_validator.rb
new file mode 100644
index 000000000..c53b76fbc
--- /dev/null
+++ b/app/validators/service_area_validator.rb
@@ -0,0 +1,10 @@
+class ServiceAreaValidator < ActiveModel::EachValidator
+  def validate_each(record, attribute, value)
+    return if value.blank?
+    default_message = "#{value} #{I18n.t('errors.messages.invalid_service_area')}"
+
+    unless SETTINGS[:valid_service_areas].include?(value)
+      record.errors[attribute] << (options[:message] || default_message)
+    end
+  end
+end
diff --git a/app/validators/url_validator.rb b/app/validators/url_validator.rb
index 73f184fd4..634fa00ed 100644
--- a/app/validators/url_validator.rb
+++ b/app/validators/url_validator.rb
@@ -1,5 +1,6 @@
 class UrlValidator < ActiveModel::EachValidator
   def validate_each(record, attribute, value)
+    return if value.blank?
     default_message = "#{value} #{I18n.t('errors.messages.invalid_url')}"
 
     unless value =~ %r{\Ahttps?:\/\/([^\s:@]+:[^\s:@]*@)?[A-Za-z\d\-]+(\.[A-Za-z\d\-]+)+\.?(:\d{1,5})?([\/?]\S*)?\z}i
diff --git a/app/views/admin/locations/forms/_admin_email_fields.html.haml b/app/views/admin/locations/forms/_admin_email_fields.html.haml
index f20f5e517..562e50842 100644
--- a/app/views/admin/locations/forms/_admin_email_fields.html.haml
+++ b/app/views/admin/locations/forms/_admin_email_fields.html.haml
@@ -1,6 +1,6 @@
 = field_set_tag do
   .row
-    .col-xs-6
+    .col-sm-6
       = email_field_tag 'location[admin_emails][]', '', class: 'form-control'
   = link_to 'Delete this admin permanently', '#', class: 'btn btn-danger delete_attribute'
   %hr
diff --git a/app/views/admin/locations/forms/_admin_emails.html.haml b/app/views/admin/locations/forms/_admin_emails.html.haml
index b1ecc887d..67412f8d8 100644
--- a/app/views/admin/locations/forms/_admin_emails.html.haml
+++ b/app/views/admin/locations/forms/_admin_emails.html.haml
@@ -11,8 +11,8 @@
     - @location.admin_emails.each_with_index do |admin, i|
       = field_set_tag do
         .row
-          .col-xs-6
-            = text_field_tag 'location[admin_emails][]', admin, class: 'form-control', id: "location_admin_emails_#{i}"
+          %div{ class: "col-sm-6 #{error_class_for(@location, :admin_emails, admin)}" }
+            = email_field_tag 'location[admin_emails][]', admin, class: 'form-control', id: "location_admin_emails_#{i}"
         = link_to 'Delete this admin permanently', '#', class: 'btn btn-danger delete_attribute'
         %hr
   = link_to_add_array_fields 'Add a new admin email', :locations, :admin_email
diff --git a/app/views/admin/locations/forms/_description.html.haml b/app/views/admin/locations/forms/_description.html.haml
index aa2d72cbc..ff17629e2 100644
--- a/app/views/admin/locations/forms/_description.html.haml
+++ b/app/views/admin/locations/forms/_description.html.haml
@@ -3,5 +3,5 @@
     = f.label :description, 'Description'
     %span.desc
       A description of the location's services.
-  %p
+  = field_set_tag do
     = f.text_area :description, required: false, class: 'form-control', rows: 10
\ No newline at end of file
diff --git a/app/views/admin/locations/forms/_emails.html.haml b/app/views/admin/locations/forms/_emails.html.haml
index 109444b06..36c870b4f 100644
--- a/app/views/admin/locations/forms/_emails.html.haml
+++ b/app/views/admin/locations/forms/_emails.html.haml
@@ -9,7 +9,7 @@
     - @location.emails.each_with_index do |email, i|
       = field_set_tag do
         .row
-          .col-md-6
+          %div{ class: "col-sm-6 #{error_class_for(@location, :emails, email)}" }
             = email_field_tag 'location[emails][]', email, class: 'form-control', id: "location_emails_#{i}"
         = link_to 'Delete this email permanently', '#', class: 'btn btn-danger delete_attribute'
         %hr
diff --git a/app/views/admin/locations/forms/_location_name.html.haml b/app/views/admin/locations/forms/_location_name.html.haml
index 4abcec8dd..c659e0002 100644
--- a/app/views/admin/locations/forms/_location_name.html.haml
+++ b/app/views/admin/locations/forms/_location_name.html.haml
@@ -3,5 +3,7 @@
     = f.label :name, 'Location Name'
     %span.desc
       The name of the organization at a location, such as a branch, department, or similar.
-  %p
-    = f.text_field :name, required: false, maxlength: 255, class: 'form-control'
\ No newline at end of file
+  = field_set_tag do
+    .row
+      .col-sm-6
+        = f.text_field :name, required: false, maxlength: 255, class: 'form-control'
\ No newline at end of file
diff --git a/app/views/admin/locations/forms/_short_desc.html.haml b/app/views/admin/locations/forms/_short_desc.html.haml
index 9782c16d2..41e621afa 100644
--- a/app/views/admin/locations/forms/_short_desc.html.haml
+++ b/app/views/admin/locations/forms/_short_desc.html.haml
@@ -3,5 +3,5 @@
     = f.label :short_desc, 'Short Description'
     %span.desc
       A short summary of the description of services.
-  %p
+  = field_set_tag do
     = f.text_area :short_desc, class: 'form-control'
\ No newline at end of file
diff --git a/app/views/admin/locations/forms/_urls.html.haml b/app/views/admin/locations/forms/_urls.html.haml
index 144c21d76..71a7cbdb6 100644
--- a/app/views/admin/locations/forms/_urls.html.haml
+++ b/app/views/admin/locations/forms/_urls.html.haml
@@ -9,7 +9,9 @@
   - if @location.urls.present?
     - @location.urls.each_with_index do |url, i|
       = field_set_tag do
-        = url_field_tag 'location[urls][]', url, class: 'form-control', id: "location_urls_#{i}"
+        .row
+          %div{ class: "col-sm-6 #{error_class_for(@location, :urls, url)}" }
+            = url_field_tag 'location[urls][]', url, class: 'form-control', id: "location_urls_#{i}"
         = link_to 'Delete this website permanently', '#', class: 'btn btn-danger delete_attribute'
         %hr
   = link_to_add_array_fields 'Add a new website', :locations, :url
diff --git a/app/views/admin/organizations/forms/_name.html.haml b/app/views/admin/organizations/forms/_name.html.haml
index 772857312..4800e801c 100644
--- a/app/views/admin/organizations/forms/_name.html.haml
+++ b/app/views/admin/organizations/forms/_name.html.haml
@@ -1,5 +1,7 @@
 .inst-box
   %header
     = f.label :name, 'Organization Name'
-  %p
-    = f.text_field :name, required: false, maxlength: 255, class: 'form-control'
\ No newline at end of file
+  = field_set_tag do
+    .row
+      .col-sm-6
+        = f.text_field :name, required: false, maxlength: 255, class: 'form-control'
\ No newline at end of file
diff --git a/app/views/admin/organizations/forms/_urls.html.haml b/app/views/admin/organizations/forms/_urls.html.haml
index f91a9e1a9..f7248de77 100644
--- a/app/views/admin/organizations/forms/_urls.html.haml
+++ b/app/views/admin/organizations/forms/_urls.html.haml
@@ -9,7 +9,9 @@
   - if @organization.urls.present?
     - @organization.urls.each_with_index do |url, i|
       = field_set_tag do
-        = url_field_tag 'organization[urls][]', url, class: 'form-control', id: "organization_urls_#{i}"
+        .row
+          %div{ class: "col-sm-6 #{error_class_for(@organization, :urls, url)}" }
+            = url_field_tag 'organization[urls][]', url, class: 'form-control', id: "organization_urls_#{i}"
         = link_to 'Delete this website permanently', '#', class: 'btn btn-danger delete_attribute'
         %hr
   = link_to_add_array_fields 'Add a new website', :organizations, :url
diff --git a/app/views/admin/services/forms/_description.html.haml b/app/views/admin/services/forms/_description.html.haml
index 606f4e2e0..45d3bd306 100644
--- a/app/views/admin/services/forms/_description.html.haml
+++ b/app/views/admin/services/forms/_description.html.haml
@@ -3,5 +3,5 @@
     = f.label :description, 'Description'
     %span.desc
       A description of the service.
-  %p
+  = field_set_tag do
     = f.text_area :description, required: false, class: 'form-control', rows: 5
diff --git a/app/views/admin/services/forms/_name.html.haml b/app/views/admin/services/forms/_name.html.haml
index d10d143ad..adb08379c 100644
--- a/app/views/admin/services/forms/_name.html.haml
+++ b/app/views/admin/services/forms/_name.html.haml
@@ -3,5 +3,7 @@
     = f.label :name, 'Service Name'
     %span.desc
       The name of the service.
-  %p
-    = f.text_field :name, required: false, maxlength: 255, class: 'form-control'
+  = field_set_tag do
+    .row
+      .col-sm-6
+        = f.text_field :name, required: false, maxlength: 255, class: 'form-control'
\ No newline at end of file
diff --git a/app/views/admin/services/forms/_service_areas.html.haml b/app/views/admin/services/forms/_service_areas.html.haml
index 478ac0411..74e7fcea5 100644
--- a/app/views/admin/services/forms/_service_areas.html.haml
+++ b/app/views/admin/services/forms/_service_areas.html.haml
@@ -10,7 +10,9 @@
   - if @service.service_areas.present?
     - @service.service_areas.each_with_index do |service_area, i|
       = field_set_tag do
-        = text_field_tag 'service[service_areas][]', service_area, class: 'form-control', id: "service_service_areas_#{i}"
+        .row
+          %div{ class: "col-sm-6 #{error_class_for(@service, :service_areas, service_area)}" }
+            = text_field_tag 'service[service_areas][]', service_area, class: 'form-control', id: "service_service_areas_#{i}"
         = link_to 'Delete this service area permanently', '#', class: 'btn btn-danger delete_attribute'
         %hr
   = link_to_add_array_fields 'Add a new service area', :services, :service_area
diff --git a/app/views/admin/services/forms/_urls.html.haml b/app/views/admin/services/forms/_urls.html.haml
index 9ffa652ed..28e735be1 100644
--- a/app/views/admin/services/forms/_urls.html.haml
+++ b/app/views/admin/services/forms/_urls.html.haml
@@ -9,7 +9,9 @@
   - if @service.urls.present?
     - @service.urls.each_with_index do |url, i|
       = field_set_tag do
-        = url_field_tag 'service[urls][]', url, class: 'form-control', id: "service_urls_#{i}"
+        .row
+          %div{ class: "col-sm-6 #{error_class_for(@service, :urls, url)}" }
+            = url_field_tag 'service[urls][]', url, class: 'form-control', id: "service_urls_#{i}"
         = link_to 'Delete this website permanently', '#', class: 'btn btn-danger delete_attribute'
         %hr
   = link_to_add_array_fields 'Add a new website', :services, :url
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 030b405ad..258c66c87 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -48,6 +48,7 @@ en:
       invalid_email: 'is not a valid email'
       invalid_fax: 'is not a valid US fax number'
       invalid_phone: 'is not a valid US phone number'
+      invalid_service_area: 'is not a valid service area'
       invalid_state: 'Please enter a valid 2-letter state abbreviation'
       invalid_url: 'is not a valid URL'
       invalid_zip: 'is not a valid ZIP code'
diff --git a/spec/api/patch_service_spec.rb b/spec/api/patch_service_spec.rb
index dfc9972d4..d9d966abd 100644
--- a/spec/api/patch_service_spec.rb
+++ b/spec/api/patch_service_spec.rb
@@ -64,7 +64,7 @@
     expect(response.status).to eq(422)
     expect(json['message']).to eq('Validation failed for resource.')
     expect(json['errors'].first['service_areas'].first).
-      to include('At least one service area is improperly formatted')
+      to eq('Belmont, CA is not a valid service area')
   end
 
   it 'returns 422 when service_areas is empty String' do
diff --git a/spec/features/admin/locations/update_admin_emails_spec.rb b/spec/features/admin/locations/update_admin_emails_spec.rb
index d36507b70..95ed553ad 100644
--- a/spec/features/admin/locations/update_admin_emails_spec.rb
+++ b/spec/features/admin/locations/update_admin_emails_spec.rb
@@ -2,7 +2,7 @@
 
 feature 'Update admin_emails' do
   background do
-    create(:location)
+    @location = create(:location)
     login_super_admin
     visit '/admin/locations/vrs-services'
   end
@@ -36,11 +36,24 @@
     expect(total_admins.length).to eq 1
   end
 
+  scenario 'with 2 admin_emails but only one is invalid', :js do
+    @location.update!(admin_emails: ['foo@ruby.org'])
+    visit '/admin/locations/vrs-services'
+    click_link 'Add a new admin'
+    admin_emails = page.
+        all(:xpath, "//input[@name='location[admin_emails][]']")
+    fill_in admin_emails[-1][:id], with: 'Alexandria'
+    click_button 'Save changes'
+    total_fields_with_errors = page.all(:css, '.field_with_errors')
+    expect(total_fields_with_errors.length).to eq 1
+  end
+
   scenario 'with invalid admin', :js do
     click_link 'Add a new admin'
     fill_in 'location[admin_emails][]', with: 'moncefsamaritanhouse.com'
     click_button 'Save changes'
     expect(page).
       to have_content 'moncefsamaritanhouse.com is not a valid email'
+    expect(page).to have_css('.field_with_errors')
   end
 end
diff --git a/spec/features/admin/locations/update_emails_spec.rb b/spec/features/admin/locations/update_emails_spec.rb
index 76590dfc8..eaae55034 100644
--- a/spec/features/admin/locations/update_emails_spec.rb
+++ b/spec/features/admin/locations/update_emails_spec.rb
@@ -35,6 +35,7 @@
     fill_in 'location_emails_0', with: 'example.org'
     click_button 'Save changes'
     expect(page).to have_content 'example.org is not a valid email'
+    expect(page).to have_css('.field_with_errors')
   end
 
   scenario 'by adding 2 new emails', :js do
@@ -58,4 +59,16 @@
     total_emails = all(:xpath, "//input[@name='location[emails][]']")
     expect(total_emails.length).to eq 1
   end
+
+  scenario 'with 2 emails but only one is invalid', :js do
+    @location.update!(emails: ['foo@ruby.org'])
+    visit '/admin/locations/vrs-services'
+    click_link 'Add a new general email'
+    emails = page.
+        all(:xpath, "//input[@name='location[emails][]']")
+    fill_in emails[-1][:id], with: 'Alexandria'
+    click_button 'Save changes'
+    total_fields_with_errors = page.all(:css, '.field_with_errors')
+    expect(total_fields_with_errors.length).to eq 1
+  end
 end
diff --git a/spec/features/admin/locations/update_name_spec.rb b/spec/features/admin/locations/update_name_spec.rb
index 35b209210..bf465d53a 100644
--- a/spec/features/admin/locations/update_name_spec.rb
+++ b/spec/features/admin/locations/update_name_spec.rb
@@ -11,6 +11,7 @@
     fill_in 'location_name', with: ''
     click_button 'Save changes'
     expect(page).to have_content "Name can't be blank for Location"
+    expect(page).to have_css('.field_with_errors')
   end
 
   scenario 'with valid location name' do
diff --git a/spec/features/admin/locations/update_urls_spec.rb b/spec/features/admin/locations/update_urls_spec.rb
index e2a789279..63fdc7b85 100644
--- a/spec/features/admin/locations/update_urls_spec.rb
+++ b/spec/features/admin/locations/update_urls_spec.rb
@@ -27,12 +27,25 @@
     expect(total_urls.length).to eq 1
   end
 
+  scenario 'with 2 urls but only one is invalid', :js do
+    @location.update!(urls: ['http://ruby.org'])
+    visit '/admin/locations/vrs-services'
+    click_link 'Add a new website'
+    urls = page.
+        all(:xpath, "//input[@name='location[urls][]']")
+    fill_in urls[-1][:id], with: 'Alexandria'
+    click_button 'Save changes'
+    total_fields_with_errors = page.all(:css, '.field_with_errors')
+    expect(total_fields_with_errors.length).to eq 1
+  end
+
   scenario 'with invalid website' do
     @location.update!(urls: ['http://ruby.org'])
     visit '/admin/locations/vrs-services'
     fill_in 'location_urls_0', with: 'www.monfresh.com'
     click_button 'Save changes'
     expect(page).to have_content 'www.monfresh.com is not a valid URL'
+    expect(page).to have_css('.field_with_errors')
   end
 
   scenario 'with valid website' do
diff --git a/spec/features/admin/organizations/update_urls_spec.rb b/spec/features/admin/organizations/update_urls_spec.rb
index a57ece927..6cc0c3a92 100644
--- a/spec/features/admin/organizations/update_urls_spec.rb
+++ b/spec/features/admin/organizations/update_urls_spec.rb
@@ -27,12 +27,25 @@
     expect(total_urls.length).to eq 1
   end
 
+  scenario 'with 2 urls but only one is invalid', :js do
+    @org.update!(urls: ['http://ruby.org'])
+    visit '/admin/organizations/parent-agency'
+    click_link 'Add a new website'
+    urls = page.
+        all(:xpath, "//input[@name='organization[urls][]']")
+    fill_in urls[-1][:id], with: 'Alexandria'
+    click_button 'Save changes'
+    total_fields_with_errors = page.all(:css, '.field_with_errors')
+    expect(total_fields_with_errors.length).to eq 1
+  end
+
   scenario 'with invalid website' do
     @org.update!(urls: ['http://ruby.org'])
     visit '/admin/organizations/parent-agency'
     fill_in 'organization_urls_0', with: 'www.monfresh.com'
     click_button 'Save changes'
     expect(page).to have_content 'www.monfresh.com is not a valid URL'
+    expect(page).to have_css('.field_with_errors')
   end
 
   scenario 'with valid website' do
diff --git a/spec/features/admin/services/update_service_areas_spec.rb b/spec/features/admin/services/update_service_areas_spec.rb
index b5d67caf0..2509d7ed1 100644
--- a/spec/features/admin/services/update_service_areas_spec.rb
+++ b/spec/features/admin/services/update_service_areas_spec.rb
@@ -29,6 +29,19 @@
     expect(total_service_areas.length).to eq 1
   end
 
+  scenario 'with 2 service_areas but only one is invalid', :js do
+    @service.update!(service_areas: ['Belmont'])
+    visit '/admin/locations/vrs-services'
+    click_link 'Literacy Program'
+    click_link 'Add a new service area'
+    service_areas = page.
+        all(:xpath, "//input[@name='service[service_areas][]']")
+    fill_in service_areas[-1][:id], with: 'Alexandria'
+    click_button 'Save changes'
+    total_fields_with_errors = page.all(:css, '.field_with_errors')
+    expect(total_fields_with_errors.length).to eq 1
+  end
+
   scenario 'with invalid service area' do
     @service.update!(service_areas: ['Belmont'])
     visit '/admin/locations/vrs-services'
@@ -36,7 +49,8 @@
     fill_in 'service_service_areas_0', with: 'Fairfax'
     click_button 'Save changes'
     expect(page).
-      to have_content 'At least one service area is improperly formatted'
+      to have_content 'Fairfax is not a valid service area'
+    expect(page).to have_css('.field_with_errors')
   end
 
   scenario 'with valid service area' do
diff --git a/spec/features/admin/services/update_urls_spec.rb b/spec/features/admin/services/update_urls_spec.rb
index bd12748c5..9b7354429 100644
--- a/spec/features/admin/services/update_urls_spec.rb
+++ b/spec/features/admin/services/update_urls_spec.rb
@@ -29,6 +29,19 @@
     expect(total_urls.length).to eq 1
   end
 
+  scenario 'with 2 urls but only one is invalid', :js do
+    @service.update!(urls: ['http://ruby.org'])
+    visit '/admin/locations/vrs-services'
+    click_link 'Literacy Program'
+    click_link 'Add a new website'
+    urls = page.
+        all(:xpath, "//input[@name='service[urls][]']")
+    fill_in urls[-1][:id], with: 'Alexandria'
+    click_button 'Save changes'
+    total_fields_with_errors = page.all(:css, '.field_with_errors')
+    expect(total_fields_with_errors.length).to eq 1
+  end
+
   scenario 'with invalid website' do
     @service.update!(urls: ['http://ruby.org'])
     visit '/admin/locations/vrs-services'
@@ -36,6 +49,7 @@
     fill_in 'service_urls_0', with: 'www.monfresh.com'
     click_button 'Save changes'
     expect(page).to have_content 'www.monfresh.com is not a valid URL'
+    expect(page).to have_css('.field_with_errors')
   end
 
   scenario 'with valid website' do
diff --git a/spec/models/service_spec.rb b/spec/models/service_spec.rb
index ef6231745..04c2a3f9b 100644
--- a/spec/models/service_spec.rb
+++ b/spec/models/service_spec.rb
@@ -48,11 +48,7 @@
   it do
     is_expected.not_to allow_value(%w(belmont)).
     for(:service_areas).
-    with_message(
-      'At least one service area is improperly formatted, ' \
-      'or is not an accepted city or county name. Please make sure all ' \
-      'words are capitalized.'
-    )
+    with_message('belmont is not a valid service area')
   end
 
   it { is_expected.to allow_value(%w(Belmont Atherton)).for(:service_areas) }