Remove client side validation

**Why**: To resolve multiple bugs

app/assets/javascripts/app/form-field-format.js

@@ -1,5 +1,4 @@
 import { PhoneFormatter, SocialSecurityNumberFormatter, TextField } from 'field-kit';
-import validateField from './validate-field';
 import DateFormatter from './modules/date-formatter';
 import OtpCodeFormatter from './modules/otp-code-formatter';
 import ZipCodeFormatter from './modules/zip-code-formatter';
@@ -29,14 +28,6 @@ function formatForm() {
 
       // removes focus set by field-kit bug https://github.com/square/field-kit/issues/62
       document.activeElement.blur();
-      field.setDelegate({
-        textFieldDidEndEditing(field) {
-          // prevents IE from thinking empty field has changed
-          if (field.element.value !== '') {
-            validateField(field.element);
-          }
-        },
-      });
     }
   });
 }

app/assets/javascripts/app/form-validation.js

@@ -1,50 +1,8 @@
-import h5f from 'h5f';
-
-import validateField from './validate-field';
-
-
-const validate = {
-  init() {
-    this.form = document.querySelector('form');
-    if (!this.form) return;
-    this.form.noValidate = true;
-    this.btn = this.form.querySelector('[type=submit]');
-
-    h5f.setup(this.form, {
-      validClass: 'valid',
-      invalidClass: 'invalid',
-      requiredClass: 'required',
-      placeholderClass: 'placeholder',
+document.addEventListener('DOMContentLoaded', () => {
+  const form = document.querySelector('form');
+  if (form && window.onbeforeunload) {
+    form.addEventListener('submit', () => {
+      if (form.checkValidity()) window.onbeforeunload = false;
     });
-
-    this.addEvents();
-  },
-
-  addEvents() {
-    this.form.addEventListener('change', e => validateField(e.target));
-    this.form.addEventListener('submit', e => this.validateForm(e));
-  },
-
-  validateForm(e) {
-    if (!this.form.checkValidity()) {
-      if (this.pageUnloader) {
-        window.onbeforeunload = this.pageUnloader;
-      }
-      e.preventDefault();
-    } else {
-      this.pageUnloader = window.onbeforeunload;
-      window.onbeforeunload = false;
-    }
-
-    const fields = this.form.querySelectorAll('.field');
-    for (let i = 0; i < fields.length; i++) {
-      validateField(fields[i]);
-    }
-
-    // add focus to first invalid input
-    const invalidField = this.form.querySelector('.invalid, .interacted.required');
-    if (invalidField) invalidField.focus();
-  },
-};
-
-document.addEventListener('DOMContentLoaded', () => validate.init());
+  }
+});

app/assets/stylesheets/components/_form.scss

@@ -35,8 +35,6 @@ textarea {
 
 
 // error states
-.invalid,
-.interacted.required,
 .has-error input {
   background-image: url(image-path('alert/ico-exclamation.svg'));
   background-position: center right $form-field-padding-x;

app/views/contact/new.html.slim

@@ -3,7 +3,6 @@
 h1.h3.my0 = t('headings.contact')
 = simple_form_for(@contact_form, url: contact_path,
     html: { autocomplete: 'off', method: :post, role: 'form' }) do |f|
-  = f.error_notification
   h4.mb-tiny = t('contact.intro')
   hr.mt0.mb-12p
   .mb3

config/locales/errors/en.yml

@@ -1,6 +1,7 @@
 en:
   errors:
     messages:
+      blank: Please fill in this field.
       improbable_phone: Phone number is invalid. Please make sure you enter a 10-digit phone number.
       weak_password: Your password is not strong enough. %{feedback}
       already_confirmed: was already confirmed, please try signing in

package.json

@@ -11,9 +11,7 @@
     "npm": "~3.8.x"
   },
   "dependencies": {
-    "classlist.js": "^1.1.20150312",
     "field-kit": "^2.1.0",
-    "h5f": "^1.1.1",
     "hint.css": "^2.3.2",
     "normalize.css": "^4.2.0",
     "zxcvbn": "^4.3.0"

spec/controllers/idv/sessions_controller_spec.rb

@@ -59,7 +59,7 @@
         post :create, profile: user_attrs.merge(ssn: '')
 
         expect(response).to_not redirect_to(idv_session_dupe_url)
-        expect(response.body).to match 'can't be blank'
+        expect(response.body).to match t('errors.messages.blank')
       end
 
       it 'checks for required fields' do
@@ -69,7 +69,7 @@
         post :create, profile: partial_attrs
 
         expect(response).to render_template(:new)
-        expect(response.body).to match 'can't be blank'
+        expect(response.body).to match t('errors.messages.blank')
       end
     end
   end

spec/controllers/users/confirmations_controller_spec.rb

@@ -9,7 +9,7 @@
     it 'tracks nil email confirmation token' do
       analytics_hash = {
         success: false,
-        error: "Confirmation token can't be blank",
+        error: 'Confirmation token Please fill in this field.',
         user_id: nil,
         existing_user: false
       }
@@ -23,7 +23,7 @@
     it 'tracks blank email confirmation token' do
       analytics_hash = {
         success: false,
-        error: "Confirmation token can't be blank",
+        error: 'Confirmation token Please fill in this field.',
         user_id: nil,
         existing_user: false
       }

spec/features/two_factor_authentication/sign_in_spec.rb

@@ -85,13 +85,6 @@
 
           expect(current_path).to eq user_two_factor_authentication_path
         end
-
-        it 'displays an error message if the code field is empty', js: true do
-          fill_in 'code', with: ''
-          click_button t('forms.buttons.submit.default')
-
-          expect(page).to have_content('Please fill in this field')
-        end
       end
     end
 

spec/features/users/sign_in_spec.rb

@@ -15,22 +15,16 @@
     expect(page).to have_content t('devise.failure.not_found_in_database')
   end
 
-  scenario 'user cannot sign in with empty email', js: true do
+  scenario 'user cannot sign in with empty email' do
     signin('', 'foo')
 
-    expect(page).to have_content 'Please fill in this field.'
-  end
-
-  scenario 'user cannot sign in with invalid email', js: true do
-    signin('invalid', 'foo')
-
-    expect(page).to have_content t('valid_email.validations.email.invalid')
+    expect(page).to have_content t('devise.failure.invalid')
   end
 
-  scenario 'user cannot sign in with empty password', js: true do
+  scenario 'user cannot sign in with empty password' do
     signin('test@example.com', '')
 
-    expect(page).to have_content 'Please fill in this field.'
+    expect(page).to have_content t('devise.failure.invalid')
   end
 
   scenario 'user cannot sign in with wrong password' do

spec/features/users/user_edit_spec.rb

@@ -8,7 +8,7 @@
     fill_in 'Email', with: ''
     click_button 'Update'
 
-    expect(page).to have_content 'Please fill in this field.'
+    expect(page).to have_content t('valid_email.validations.email.invalid')
   end
 
   scenario 'user sees error message if form is submitted without phone number', js: true do
@@ -18,6 +18,6 @@
     fill_in 'Phone', with: ''
     click_button 'Update'
 
-    expect(page).to have_content 'Please fill in this field.'
+    expect(page).to have_content t('errors.messages.improbable_phone')
   end
 end

spec/features/visitors/contact_spec.rb

@@ -16,6 +16,6 @@
     fill_in 'contact_form_email_or_tel', with: ''
     click_button t('forms.buttons.send')
 
-    expect(page).to have_content t('simple_form.error_notification.default_message')
+    expect(page).to have_content t('errors.messages.blank')
   end
 end

spec/features/visitors/password_recovery_spec.rb

@@ -188,13 +188,6 @@ def reset_password_and_sign_back_in(user)
     expect(page).to have_content t('valid_email.validations.email.invalid')
   end
 
-  scenario 'user submits blank email address and has JS turned on', js: true do
-    visit new_user_password_path
-    click_button t('forms.buttons.reset_password')
-
-    expect(page).to have_content 'Please fill in this field.'
-  end
-
   scenario 'user is unable to determine if account exists' do
     visit new_user_password_path
     fill_in 'Email', with: 'no_account_exists@gmail.com'

spec/features/visitors/resend_email_confirmation_spec.rb

@@ -55,13 +55,6 @@
     end
   end
 
-  scenario 'user enters empty email with JS turned on', js: true do
-    fill_in 'Email', with: ''
-    click_button t('forms.buttons.resend_confirmation')
-
-    expect(page).to have_content 'Please fill in this field.'
-  end
-
   scenario 'user enters empty email' do
     fill_in 'Email', with: ''
     click_button t('forms.buttons.resend_confirmation')

spec/features/visitors/sign_up_with_email_spec.rb

@@ -15,12 +15,6 @@
     expect(page).to have_content t('valid_email.validations.email.invalid')
   end
 
-  scenario 'visitor cannot sign up with empty email address', js: true do
-    sign_up_with('')
-
-    expect(page).to have_content('Please fill in this field')
-  end
-
   scenario 'visitor cannot sign up with email with invalid domain name' do
     invalid_addresses = [
       'foo@bar.com',

spec/forms/contact_form_spec.rb

@@ -8,7 +8,7 @@
       subject.submit(email_or_tel: nil)
 
       expect(subject).to_not be_valid
-      expect(subject.errors.full_messages.first).to eq "Email or tel can't be blank"
+      expect(subject.errors[:email_or_tel]).to eq [t('errors.messages.blank')]
     end
   end
 end