diff --git a/app/javascript/packs/email-validation.js b/app/javascript/packs/email-validation.js
index 531d433974d..2423f6fac88 100644
--- a/app/javascript/packs/email-validation.js
+++ b/app/javascript/packs/email-validation.js
@@ -5,6 +5,16 @@ function emailValidation() {
   const email = document.querySelector('input[type="email"]');
   let blurTimer;
 
+  function hideElem(elem) {
+    elem.classList.add('hide');
+    elem.hidden = true;
+  }
+
+  function showElem(elem) {
+    elem.classList.remove('hide');
+    elem.hidden = false;
+  }
+
   // remove focus from the email input after error is displayed
   function blurEmailInput(input) {
     blurTimer = setTimeout(function () {
@@ -14,15 +24,15 @@ function emailValidation() {
 
   function resetEmailInvalid(input) {
     input.classList.remove('usa-input--error');
-    alert.classList.add('hide');
-    alertInline.classList.add('hide');
+    hideElem(alert);
+    hideElem(alertInline);
     clearTimeout(blurTimer);
   }
 
   function displayEmailInvalid(input) {
     input.classList.add('usa-input--error');
-    alert.classList.remove('hide');
-    alertInline.classList.remove('hide');
+    showElem(alert);
+    showElem(alertInline);
     blurEmailInput(input);
   }
 
diff --git a/app/views/sign_up/registrations/new.html.erb b/app/views/sign_up/registrations/new.html.erb
index 9d8ea5af5f4..df83fc1be21 100644
--- a/app/views/sign_up/registrations/new.html.erb
+++ b/app/views/sign_up/registrations/new.html.erb
@@ -2,7 +2,7 @@
 
 <%= render 'shared/sp_alert' %>
 
-<div class='email-invalid-alert usa-alert margin-bottom-2 usa-alert--error hide'>
+<div class='email-invalid-alert usa-alert margin-bottom-2 usa-alert--error hide' hidden='true'>
   <div class='usa-alert__body'>
     <p class='usa-alert__text'>
       <%= t('sign_up.email.invalid_email_alert_head') %>
@@ -17,7 +17,7 @@
       html: { autocomplete: 'off', role: 'form' },
       url: sign_up_register_path) do |f| %>
     <%= f.input :email, label: t('forms.registration.labels.email'), required: true %>
-    <span class='email-invalid-alert-inline usa-error-message margin-top-neg-3 margin-bottom-3 hide' role='alert'>
+    <span class='email-invalid-alert-inline usa-error-message margin-top-neg-3 margin-bottom-3 hide' role='alert' hidden='true'>
       <%= t('sign_up.email.invalid_email_alert_inline') %>
     </span>
     <%= f.input :request_id, as: :hidden, input_html: { value: params[:request_id] || request_id } %>
diff --git a/spec/features/visitors/sign_up_with_email_spec.rb b/spec/features/visitors/sign_up_with_email_spec.rb
index eda2b9f653e..2a514f69f1c 100644
--- a/spec/features/visitors/sign_up_with_email_spec.rb
+++ b/spec/features/visitors/sign_up_with_email_spec.rb
@@ -12,7 +12,7 @@
     expect(Funnel::Registration::TotalRegisteredCount.call).to eq(0)
   end
 
-  scenario 'visitor cannot sign up with invalid email address' do
+  scenario 'visitor cannot sign up with invalid email address', js: true do
     sign_up_with('bogus')
     expect_email_invalid(page)
   end
@@ -26,11 +26,11 @@
 
     invalid_addresses.each do |email|
       sign_up_with(email)
-      expect_email_invalid(page)
+      expect(page).to have_content(t('valid_email.validations.email.invalid'))
     end
   end
 
-  scenario 'visitor cannot sign up with empty email address' do
+  scenario 'visitor cannot sign up with empty email address', js: true do
     sign_up_with('')
 
     expect_email_invalid(page)