diff --git a/src/forgot-password/ForgotPasswordPage.jsx b/src/forgot-password/ForgotPasswordPage.jsx
index fad3130045..d4fc33e471 100644
--- a/src/forgot-password/ForgotPasswordPage.jsx
+++ b/src/forgot-password/ForgotPasswordPage.jsx
@@ -86,6 +86,9 @@ const ForgotPasswordPage = (props) => {
props.setForgotPasswordFormData({ email, emailValidationError: error });
windowScrollTo({ left: 0, top: 0, behavior: 'smooth' });
} else {
+ setFormErrors('');
+ setValidationError('');
+ props.setForgotPasswordFormData({ email, emailValidationError: '' });
props.forgotPassword(email);
}
};
diff --git a/src/forgot-password/tests/ForgotPasswordPage.test.jsx b/src/forgot-password/tests/ForgotPasswordPage.test.jsx
index c3b97c030d..1b7848e44a 100644
--- a/src/forgot-password/tests/ForgotPasswordPage.test.jsx
+++ b/src/forgot-password/tests/ForgotPasswordPage.test.jsx
@@ -10,7 +10,7 @@ import configureStore from 'redux-mock-store';
import { INTERNAL_SERVER_ERROR, LOGIN_PAGE } from '../../data/constants';
import { PASSWORD_RESET } from '../../reset-password/data/constants';
-import { setForgotPasswordFormData } from '../data/actions';
+import { forgotPassword, setForgotPasswordFormData } from '../data/actions';
import ForgotPasswordPage from '../ForgotPasswordPage';
const mockedNavigator = jest.fn();
@@ -111,7 +111,7 @@ describe('ForgotPasswordPage', () => {
forgotPassword: { status: INTERNAL_SERVER_ERROR },
});
const expectedMessage = 'We were unable to contact you.'
- + 'An error has occurred. Try refreshing the page, or check your internet connection.';
+ + 'An error has occurred. Try refreshing the page, or check your internet connection.';
const { container } = render(reduxWrapper());
@@ -231,8 +231,8 @@ describe('ForgotPasswordPage', () => {
});
const successMessage = 'Check your emailWe sent an email to with instructions to reset your password. If you do not '
- + 'receive a password reset message after 1 minute, verify that you entered the correct email address,'
- + ' or check your spam folder. If you need further assistance, contact technical support.';
+ + 'receive a password reset message after 1 minute, verify that you entered the correct email address,'
+ + ' or check your spam folder. If you need further assistance, contact technical support.';
const { container } = render(reduxWrapper());
const successElement = findByTextContent(container, successMessage);
@@ -241,6 +241,29 @@ describe('ForgotPasswordPage', () => {
expect(successElement.textContent).toEqual(successMessage);
});
+ it('should clear validation errors before submitting a valid email', () => {
+ store.dispatch = jest.fn(store.dispatch);
+
+ const { container } = render(reduxWrapper());
+
+ // First submit an invalid/blank email to trigger the alert banner via local `formErrors`.
+ fireEvent.click(screen.getByText('Submit'));
+ expect(container.querySelector('.alert-danger')).not.toBeNull();
+
+ // Then resubmit with a valid email and verify the banner + validation error are cleared.
+ const emailInput = screen.getByLabelText('Email');
+ fireEvent.change(emailInput, { target: { value: 'registered@example.com' } });
+ fireEvent.click(screen.getByText('Submit'));
+
+ expect(store.dispatch).toHaveBeenCalledWith(forgotPassword('registered@example.com'));
+ expect(store.dispatch).toHaveBeenCalledWith(setForgotPasswordFormData({
+ email: 'registered@example.com',
+ emailValidationError: '',
+ }));
+ expect(container.querySelector('.pgn__form-text-invalid')).toBeNull();
+ expect(container.querySelector('.alert-danger')).toBeNull();
+ });
+
it('should display invalid password reset link error', () => {
store = mockStore({
...initialState,
@@ -249,8 +272,8 @@ describe('ForgotPasswordPage', () => {
},
});
const successMessage = 'Invalid password reset link'
- + 'This password reset link is invalid. It may have been used already. '
- + 'Enter your email below to receive a new link.';
+ + 'This password reset link is invalid. It may have been used already. '
+ + 'Enter your email below to receive a new link.';
const { container } = render(reduxWrapper());
const successElement = findByTextContent(container, successMessage);