diff --git a/src/containers/ContactDetailsForm/ContactDetailsForm.js b/src/containers/ContactDetailsForm/ContactDetailsForm.js index c9ddac2b..64c15e12 100644 --- a/src/containers/ContactDetailsForm/ContactDetailsForm.js +++ b/src/containers/ContactDetailsForm/ContactDetailsForm.js @@ -78,6 +78,10 @@ class ContactDetailsFormComponent extends Component { id: 'ContactDetailsForm.emailRequired', }); const emailRequired = validators.required(emailRequiredMessage); + const emailInvalidMessage = intl.formatMessage({ + id: 'ContactDetailsForm.emailInvalid', + }); + const emailValid = validators.emailFormatValid(emailInvalidMessage); const tooManyVerificationRequests = isTooManyEmailVerificationRequestsError( sendVerificationEmailError @@ -210,7 +214,7 @@ class ContactDetailsFormComponent extends Component { id={`${form}.email`} label={emailLabel} placeholder={emailPlaceholder} - validate={emailRequired} + validate={[emailRequired, emailValid]} customErrorText={emailTakenErrorText} /> {emailVerifiedInfo} diff --git a/src/containers/LoginForm/LoginForm.js b/src/containers/LoginForm/LoginForm.js index 9d191e71..447c6a4d 100644 --- a/src/containers/LoginForm/LoginForm.js +++ b/src/containers/LoginForm/LoginForm.js @@ -31,6 +31,10 @@ const LoginFormComponent = props => { id: 'LoginForm.emailRequired', }); const emailRequired = validators.required(emailRequiredMessage); + const emailInvalidMessage = intl.formatMessage({ + id: 'LoginForm.emailInvalid', + }); + const emailValid = validators.emailFormatValid(emailInvalidMessage); // password const passwordLabel = intl.formatMessage({ @@ -64,7 +68,7 @@ const LoginFormComponent = props => { id={`${form}.email`} label={emailLabel} placeholder={emailPlaceholder} - validate={emailRequired} + validate={[emailRequired, emailValid]} /> { const emailNotFoundMessage = intl.formatMessage({ id: 'PasswordRecoveryForm.emailNotFound', }); + const emailInvalidMessage = intl.formatMessage({ + id: 'PasswordRecoveryForm.emailInvalid', + }); const emailRequired = validators.required(emailRequiredMessage); + const emailValid = validators.emailFormatValid(emailInvalidMessage); + // In case a given email is not found, pass a custom error message // to be rendered with the input component const customErrorText = isPasswordRecoveryEmailNotFoundError(recoveryError) @@ -64,7 +69,7 @@ const PasswordRecoveryFormComponent = props => { id={`${form}.email`} label={emailLabel} placeholder={emailPlaceholder} - validate={emailRequired} + validate={[emailRequired, emailValid]} customErrorText={customErrorText} /> diff --git a/src/containers/SignupForm/SignupForm.js b/src/containers/SignupForm/SignupForm.js index aacae31f..7fc866c3 100644 --- a/src/containers/SignupForm/SignupForm.js +++ b/src/containers/SignupForm/SignupForm.js @@ -31,6 +31,10 @@ const SignupFormComponent = props => { id: 'SignupForm.emailRequired', }); const emailRequired = validators.required(emailRequiredMessage); + const emailInvalidMessage = intl.formatMessage({ + id: 'SignupForm.emailInvalid', + }); + const emailValid = validators.emailFormatValid(emailInvalidMessage); // password const passwordLabel = intl.formatMessage({ @@ -106,7 +110,7 @@ const SignupFormComponent = props => { id={`${form}.email`} label={emailLabel} placeholder={emailPlaceholder} - validate={emailRequired} + validate={[emailRequired, emailValid]} />
+ value => { + return value && EMAIL_RE.test(value) ? VALID : message; + };