diff --git a/app/assets/javascripts/app/form-field-format.js b/app/assets/javascripts/app/form-field-format.js index ae69497badd..5133b504e66 100644 --- a/app/assets/javascripts/app/form-field-format.js +++ b/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); - } - }, - }); } }); } diff --git a/app/assets/javascripts/app/form-validation.js b/app/assets/javascripts/app/form-validation.js index d717f5c68eb..183b697f8ee 100644 --- a/app/assets/javascripts/app/form-validation.js +++ b/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()); + } +}); diff --git a/app/assets/javascripts/app/validate-field.js b/app/assets/javascripts/app/validate-field.js deleted file mode 100644 index 66d83304c15..00000000000 --- a/app/assets/javascripts/app/validate-field.js +++ /dev/null @@ -1,42 +0,0 @@ -import 'classlist.js'; - -const I18n = window.LoginGov.I18n; - -function addInvalidMarkup(f) { - f.setAttribute('aria-invalid', 'true'); - f.setAttribute('aria-describedby', `alert_${f.id}`); - - if (f.validity.valueMissing) f.setCustomValidity(I18n.t('errors.messages.missing_field')); - else if (f.validity.typeMismatch && - f.type === 'email') f.setCustomValidity(I18n.t('valid_email.validations.email.invalid')); - else if (f.validity.patternMismatch - || f.validity.typeMismatch) f.setCustomValidity(I18n.t('errors.messages.format_mismatch')); - - f.insertAdjacentHTML( - 'afterend', - `` - ); -} - -function removeInvalidMarkup(f) { - f.parentNode.classList.remove('has-error'); - f.removeAttribute('aria-invalid'); - f.removeAttribute('aria-describedby'); -} - -function validateField(f) { - f.setCustomValidity(''); - f.classList.add('interacted'); - - const parent = f.parentNode; - const errorMsg = parent.querySelector('.error-message'); - - if (errorMsg !== null) parent.removeChild(errorMsg); - - if (!f.validity.valid) addInvalidMarkup(f); - else removeInvalidMarkup(f); -} - -export default validateField; diff --git a/app/assets/stylesheets/components/_form.scss b/app/assets/stylesheets/components/_form.scss index 5f6d5cbce5f..dbe5783ab7d 100644 --- a/app/assets/stylesheets/components/_form.scss +++ b/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; diff --git a/app/views/contact/new.html.slim b/app/views/contact/new.html.slim index 2a169ae8cbd..da45d29b6d9 100644 --- a/app/views/contact/new.html.slim +++ b/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 diff --git a/config/locales/errors/en.yml b/config/locales/errors/en.yml index 1170e7f6d06..70bb14cca30 100644 --- a/config/locales/errors/en.yml +++ b/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 diff --git a/package.json b/package.json index 28b92624b18..89273cdc10b 100644 --- a/package.json +++ b/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" diff --git a/spec/controllers/idv/sessions_controller_spec.rb b/spec/controllers/idv/sessions_controller_spec.rb index ed557032345..725092ef563 100644 --- a/spec/controllers/idv/sessions_controller_spec.rb +++ b/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 diff --git a/spec/controllers/users/confirmations_controller_spec.rb b/spec/controllers/users/confirmations_controller_spec.rb index fa38bdf728f..e558e3f22fb 100644 --- a/spec/controllers/users/confirmations_controller_spec.rb +++ b/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 } diff --git a/spec/features/two_factor_authentication/sign_in_spec.rb b/spec/features/two_factor_authentication/sign_in_spec.rb index 794140d26a9..63f65392ebb 100644 --- a/spec/features/two_factor_authentication/sign_in_spec.rb +++ b/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 diff --git a/spec/features/users/sign_in_spec.rb b/spec/features/users/sign_in_spec.rb index 707acc32942..4dc19e2f8ce 100644 --- a/spec/features/users/sign_in_spec.rb +++ b/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 diff --git a/spec/features/users/user_edit_spec.rb b/spec/features/users/user_edit_spec.rb index 757d006e6b7..95684c8c17c 100644 --- a/spec/features/users/user_edit_spec.rb +++ b/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 diff --git a/spec/features/visitors/contact_spec.rb b/spec/features/visitors/contact_spec.rb index fb4dabdd808..572b659e364 100644 --- a/spec/features/visitors/contact_spec.rb +++ b/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 diff --git a/spec/features/visitors/password_recovery_spec.rb b/spec/features/visitors/password_recovery_spec.rb index 077ac3c2d64..9f65bdb3598 100644 --- a/spec/features/visitors/password_recovery_spec.rb +++ b/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' diff --git a/spec/features/visitors/resend_email_confirmation_spec.rb b/spec/features/visitors/resend_email_confirmation_spec.rb index bebcd5a959f..3100171cfa7 100644 --- a/spec/features/visitors/resend_email_confirmation_spec.rb +++ b/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') diff --git a/spec/features/visitors/sign_up_with_email_spec.rb b/spec/features/visitors/sign_up_with_email_spec.rb index 8dacc907249..8c95c0ada68 100644 --- a/spec/features/visitors/sign_up_with_email_spec.rb +++ b/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', diff --git a/spec/forms/contact_form_spec.rb b/spec/forms/contact_form_spec.rb index e261f0aba76..a549b9268fc 100644 --- a/spec/forms/contact_form_spec.rb +++ b/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