diff --git a/src/pages/academy/components/_side-subscription-banner.js b/src/pages/academy/components/_side-subscription-banner.js index aacfd5a3c6e..5e9182c4ecf 100644 --- a/src/pages/academy/components/_side-subscription-banner.js +++ b/src/pages/academy/components/_side-subscription-banner.js @@ -200,11 +200,11 @@ const ArticleEmailBanner = () => { const handleValidation = (param, type) => { const message = typeof param === 'object' ? param.target.value : param - if (type == 'email') { - setEmailErrorMsg(validateEmail(message.replace(/\s/g, ''))) + if (type === 'email') { + setEmailErrorMsg(validateEmail(message)) } - if (type == 'name') { + if (type === 'name') { setNameErrorMsg(validateName(message.replace(/\s/g, ''))) } } @@ -294,6 +294,7 @@ const ArticleEmailBanner = () => { type="text" value={name} error={name_error_msg} + maxLength="70" required onChange={handleInputNameChange} /> @@ -322,6 +323,7 @@ const ArticleEmailBanner = () => { id="email" name="email" type="text" + maxLength="254" value={email} required onChange={handleInputChange} diff --git a/src/pages/academy/components/_subscribe.js b/src/pages/academy/components/_subscribe.js index b6e0d81a813..26c260e5a35 100644 --- a/src/pages/academy/components/_subscribe.js +++ b/src/pages/academy/components/_subscribe.js @@ -231,24 +231,30 @@ const Subscribe = () => { const { value } = e.target setName(value) - handleValidation(value) + handleValidation(value, 'name') } const handleInputChange = (e) => { const { value } = e.target setEmail(value) - handleValidation(value) + handleValidation(value, 'email') } - const handleValidation = (param) => { + const handleValidation = (param, type) => { const message = typeof param === 'object' ? param.target.value : param - setNameErrorMsg(validateName(message.replace(/\s/g, ''))) - setEmailErrorMsg(validateEmail(message.replace(/\s/g, ''))) + + if (type === 'email') { + setEmailErrorMsg(validateEmail(message)) + } + + if (type === 'name') { + setNameErrorMsg(validateName(message.replace(/\s/g, ''))) + } } - const validateEmail = (email) => { - const error_message = validation.email(email) || submit_error_msg + const validateEmail = (email_str) => { + const error_message = validation.email(email_str) || submit_error_msg if (submit_error_msg) { setSubmitErrorMsg('') @@ -258,8 +264,8 @@ const Subscribe = () => { return error_message } - const validateName = (name) => { - const error_message = validation.name(name) || submit_error_msg + const validateName = (name_str) => { + const error_message = validation.name(name_str) || submit_error_msg if (submit_error_msg) { setSubmitErrorMsg('') @@ -292,8 +298,8 @@ const Subscribe = () => { e.preventDefault() setIsSubmitting(true) const formattedEmail = email.replace(/\s/g, '') - handleValidation(email) - handleValidation(name) + handleValidation(email, 'email') + handleValidation(name, 'name') const has_error_email = validateEmail(formattedEmail) const has_error_name = validateName(formattedEmail) @@ -350,9 +356,9 @@ const Subscribe = () => { placeholder={'Your name'} handleError={clearName} onChange={handleInputNameChange} - onBlur={handleValidation} autoComplete="off" border="unset" + maxLength="70" height="40px" focusBorder="var(--color-grey-7)" /> @@ -372,11 +378,11 @@ const Subscribe = () => { placeholder={'Your email address'} handleError={clearEmail} onChange={handleInputChange} - onBlur={handleValidation} autoComplete="off" required border="unset" height="40px" + maxLength="254" focusBorder="var(--color-grey-7)" />