Validar el campo de entrada de correo electrónico del formulario

06 Aug, 2023 Programación 0

Es posible validar múltiples correos electrónicos separados por comas con react-hook-form.

Entonces, tengo un campo de texto de material-ui que utiliza react-hook-form para la validación…

Inicialmente, el campo de entrada toma un solo correo electrónico y se valida mediante react-hook-form.
Actualmente, quiero que el usuario pueda ingresar múltiples correos electrónicos separados por comas y también validar cada uno de ellos.
Actualmente, lo que puedo hacer es validar cuando el usuario hace clic en enviar, pero quiero poder validar mientras el usuario está escribiendo los correos electrónicos.

<textfield onchange="{(e)" ==""> {
    validateRecipientEmail(e.target.value);
  }}
  name='recipientEmail'
  placeholder='sender@email.com'
  fullWidth
  inputRef={register({
    required: true,
  })}
  error={errors.recipientEmail && true}
/>
{errors.recipientEmail && (
  <typography variant='caption' classname="{Type.textError}">
    Dirección de correo electrónico no válida
  </typography>
)}

Encontré una forma de lograr el objetivo deseado haciendo la validación con el evento onChange.
pero después de hacer la validación y mostrar el error en la pantalla, el error desaparece cuando el campo de entrada no está enfocado.

A continuación se muestra mi validación:

“`jsx
const validateRecipientEmail = (value) => {
let currentEmails = value.split(',').filter((e) => e && e.trim());
let regex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]+$/i;
for (let i = 0; i < currentEmails.length; i++) {
if (!regex.test(currentEmails[i].replace(/\s/g, ''))) {
setrecipientEmailErrorMessage(
<code>Ingrese correo(s) electrónico(s) válido(s) separados por coma (,)</code>
);
setError('recipientEmail', {
type: 'manual',
});
}
}

if (currentEmails.length > 10) {
setrecipientEmailErrorMessage(<code>No debe haber más de 10 correos electrónicos</code>);
setError('recipientEmail', {
type: 'manual',
});
}
};
“`

davy.ai

August 6, 2023 at 4:10 pm

Sí, es posible validar varios correos electrónicos separados por comas utilizando react-hook-form. Como se muestra en el fragmento de código proporcionado, la función validateRecipientEmail se puede utilizar para dividir el valor de entrada por comas y luego validar cada correo electrónico de forma individual utilizando una expresión regular. La función setError se puede utilizar para establecer manualmente un error para el campo recipientEmail si alguno de los correos electrónicos no es válido o si hay demasiados correos electrónicos.

Sin embargo, el problema con la desaparición del error cuando el campo de entrada no está en foco puede deberse al hecho de que la validación se está realizando en el evento onChange, que no se activa cuando el campo no está en foco. Para solucionar esto, podrías intentar utilizar el gancho useEffect para actualizar la validación cada vez que el valor de entrada cambie, de la siguiente manera:

useEffect(() => {
  validateRecipientEmail(getValues('recipientEmail'));
}, [getValues('recipientEmail')]);

Esto volverá a ejecutar la validación cada vez que cambie el valor del campo recipientEmail, independientemente de si el campo está o no en foco.

Answer

davy.ai

August 6, 2023 at 4:10 pm
Sí, es posible validar varios correos electrónicos separados por comas utilizando react-hook-form. Como se muestra en el fragmento de código proporcionado, la función validateRecipientEmail se puede utilizar para dividir el valor de entrada por comas y luego validar cada correo electrónico de forma individual utilizando una expresión regular. La función setError se puede utilizar para establecer manualmente un error para el campo recipientEmail si alguno de los correos electrónicos no es válido o si hay demasiados correos electrónicos.

Sin embargo, el problema con la desaparición del error cuando el campo de entrada no está en foco puede deberse al hecho de que la validación se está realizando en el evento onChange, que no se activa cuando el campo no está en foco. Para solucionar esto, podrías intentar utilizar el gancho useEffect para actualizar la validación cada vez que el valor de entrada cambie, de la siguiente manera:
```
useEffect(() => {
  validateRecipientEmail(getValues('recipientEmail'));
}, [getValues('recipientEmail')]);
```
Esto volverá a ejecutar la validación cada vez que cambie el valor del campo recipientEmail, independientemente de si el campo está o no en foco.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Validar el campo de entrada de correo electrónico del formulario

Answer

davy.ai