Skip to content

Fix async validation errors persist when unrelated fields are edited #3549

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

Fix async validation errors persist when unrelated fields are edited #3549

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 11 additions & 16 deletions client/modules/User/components/SignupForm.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ function asyncValidate(fieldToValidate, value) {

const queryParams = {
[fieldToValidate]: value,
check_type: fieldToValidate
check_type: fieldToValidate,
};

return new Promise((resolve) => {
Expand Down Expand Up @@ -66,8 +66,7 @@ function SignupForm() {
useSyncFormTranslations(formRef, i18n.language);

const handleVisibility = () => setShowPassword(!showPassword);
const handleConfirmVisibility = () =>
setShowConfirmPassword(!showConfirmPassword);
const handleConfirmVisibility = () => setShowConfirmPassword(!showConfirmPassword);

function onSubmit(formProps) {
return dispatch(validateAndSignUpUser(formProps));
Expand All @@ -86,7 +85,7 @@ function SignupForm() {
<Field
name="username"
validate={validateUsername}
validateFields={[]}
// Removed validateFields to keep username error persistent on other fields' changes
>
{(field) => (
<div className="form__field">
Expand All @@ -110,7 +109,11 @@ function SignupForm() {
</div>
)}
</Field>
<Field name="email" validate={validateEmail} validateFields={[]}>
<Field
name="email"
validate={validateEmail}
// Removed validateFields to keep email error persistent on other fields' changes
>
{(field) => (
<div className="form__field">
<label htmlFor="email" className="form__label">
Expand Down Expand Up @@ -153,11 +156,7 @@ function SignupForm() {
onClick={handleVisibility}
aria-hidden="true"
>
{showPassword ? (
<AiOutlineEyeInvisible />
) : (
<AiOutlineEye />
)}
{showPassword ? <AiOutlineEyeInvisible /> : <AiOutlineEye />}
</button>
</div>
{field.meta.touched && field.meta.error && (
Expand All @@ -179,7 +178,7 @@ function SignupForm() {
className="form__input"
type={showConfirmPassword ? 'text' : 'password'}
aria-label={t('SignupForm.ConfirmPasswordARIA')}
id="confirmPassword" // Match the id with htmlFor
id="confirmPassword"
autoComplete="new-password"
{...field.input}
/>
Expand All @@ -189,11 +188,7 @@ function SignupForm() {
onClick={handleConfirmVisibility}
aria-hidden="true"
>
{showConfirmPassword ? (
<AiOutlineEyeInvisible />
) : (
<AiOutlineEye />
)}
{showConfirmPassword ? <AiOutlineEyeInvisible /> : <AiOutlineEye />}
</button>
</div>
{field.meta.touched && field.meta.error && (
Expand Down
17 changes: 10 additions & 7 deletions client/utils/reduxFormUtils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
/* eslint-disable */
import i18n from 'i18next';

export const domOnlyProps = ({
initialValue,
autofill,
Expand All @@ -23,20 +24,20 @@ const EMAIL_REGEX = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))

function validateNameEmail(formProps, errors) {
if (!formProps.username) {
errors.username = i18n.t('ReduxFormUtils.errorEmptyUsername');
errors.username = errors.username || i18n.t('ReduxFormUtils.errorEmptyUsername');
} else if (!formProps.username.match(/^.{1,20}$/)) {
errors.username = i18n.t('ReduxFormUtils.errorLongUsername');
errors.username = errors.username || i18n.t('ReduxFormUtils.errorLongUsername');
} else if (!formProps.username.match(/^[a-zA-Z0-9._-]{1,20}$/)) {
errors.username = i18n.t('ReduxFormUtils.errorValidUsername');
errors.username = errors.username || i18n.t('ReduxFormUtils.errorValidUsername');
}

if (!formProps.email) {
errors.email = i18n.t('ReduxFormUtils.errorEmptyEmail');
errors.email = errors.email || i18n.t('ReduxFormUtils.errorEmptyEmail');
} else if (
// eslint-disable-next-line max-len
!formProps.email.match(EMAIL_REGEX)
) {
errors.email = i18n.t('ReduxFormUtils.errorInvalidEmail');
errors.email = errors.email || i18n.t('ReduxFormUtils.errorInvalidEmail');
}
}

Expand Down Expand Up @@ -96,14 +97,16 @@ export function validateNewPassword(formProps) {
return errors;
}

export function validateSignup(formProps) {
const errors = {};
export function validateSignup(formProps, existingErrors = {}) {
// Merge existing errors (could be from async validation) to preserve them
const errors = { ...existingErrors };

validateNameEmail(formProps, errors);
validatePasswords(formProps, errors);

return errors;
}

export function validateResetPassword(formProps) {
const errors = {};
if (!formProps.email) {
Expand Down