¿Alguna vez ha intentado enviar un formulario, solo para que la página web le dé un mensaje de error que le dice que uno o más de los campos no son válidos? Si es así, entonces ha experimentado la validación de formularios.
La validación suele ser esencial para obtener datos limpios y utilizables. Desde direcciones de correo electrónico hasta fechas, si necesita ser preciso, debe verificarlo cuidadosamente.
¿Qué es la validación de formularios?
La validación de formularios es el proceso de garantizar que los datos ingresados en un formulario por un usuario sean correctos y completos. Puede hacer esto en el lado del cliente, utilizando funciones HTML integradas como el atributo requerido. Tú también puedes validar en el cliente usando JavaScripty hay bibliotecas externas de Next.js para ayudar a facilitar el proceso.
Hay varias razones por las que la validación de formularios es esencial. En primer lugar, ayuda a garantizar que los datos ingresados en un formulario estén completos y sean correctos. Esto es importante porque ayuda a evitar errores cuando su aplicación envía datos a un servidor o base de datos.
En segundo lugar, la validación de formularios puede ayudar a mejorar la usabilidad de un formulario al proporcionar comentarios cuando un usuario ingresa datos no válidos. Esto puede ayudar a evitar la frustración y la confusión por parte del usuario.
Finalmente, la validación de formularios puede ayudar a mejorar la seguridad de un formulario al garantizar que solo envíe datos válidos.
Cómo validar formularios en Next.js
Hay dos formas de validar formularios en Next.js: usando los métodos integrados o usando bibliotecas externas.
Uso de los métodos integrados
HTML proporciona varios métodos para validar formularios, el más común de los cuales es el requerido atributo. Esto asegura que un campo no puede estar en blanco. Puede usar este método desde su aplicación Next.js, simplemente incluyendo el atributo en las etiquetas de entrada que genera. HTML también proporciona una patrón atributo. Puedes usar esto junto con un expresión regular para una validación más compleja.
Este ejemplo incluye un formulario con dos campos: nombre y correo electrónico. El campo de nombre es obligatorio y el campo de correo electrónico debe coincidir con una expresión regular.
importar Reaccionar de 'reaccionar'claseMi formularioextiendeReaccionar.Componente{
prestar() {
devolver (
<forma >
<etiqueta>
Nombre:
<tipo de entrada ="texto" nombre="nombre" requerido />
</label>
<etiqueta>
Correo electrónico:
<tipo de entrada ="correo electrónico" nombre="correo electrónico"
patrón ="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" />
</label>
<tipo de entrada ="entregar" valor="Entregar" />
</form>
)
}
}
exportarpor defecto Mi formulario
Este código importa la biblioteca React, luego crea una clase llamada MyForm y representa un elemento de formulario. Dentro del elemento de formulario, hay dos elementos de etiqueta.
El primer elemento de la etiqueta contiene un campo de entrada de texto obligatorio. El segundo elemento de etiqueta contiene un campo de entrada de correo electrónico con una expresión regular en su atributo de patrón.
Finalmente, tienes un botón de enviar. Cuando un usuario envía el formulario, el atributo obligatorio garantiza que completó el campo de nombre. El atributo de patrón del campo de correo electrónico garantiza que el correo electrónico tenga el formato especificado. Si alguna de estas condiciones falla, el formulario no se enviará.
Existen algunas desventajas en el uso de los métodos integrados. Primero, puede ser difícil hacer un seguimiento de todas las diferentes reglas de validación que ha configurado. En segundo lugar, si tiene muchos campos, puede ser tedioso agregar el atributo obligatorio a cada uno. Por último, los métodos integrados solo proporcionan una validación básica. Si desea realizar una validación más compleja, deberá utilizar una biblioteca externa.
Uso de una biblioteca externa
Además de los métodos integrados, también hay muchas bibliotecas externas que puede usar para validar formularios. Algunas bibliotecas populares incluyen Formik, react-hook-form y Yup.
Para usar una biblioteca externa, primero deberá instalarla. Por ejemplo, para instalar Formik, ejecute el siguiente comando:
npm instalar formaUna vez que haya instalado la biblioteca, puede importarla a su componente y usarla para validar su formulario:
importar Reaccionar de 'reaccionar'
importar { Formik, Formulario, Campo } de 'formik'constante MiFormulario = () => (
<Formik
valoresIniciales={{ nombre: '', correo electrónico: '' }}
validar={valores => {
constante errores = {}
si (!valores.nombre) {
errores.nombre = 'Requerido'
}
si (!valores.correo electrónico) {
errores.email = 'Requerido'
} demássi (
!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test (valores.email)
) {
errores.email = 'Dirección de correo electrónico no válida'
}
devolver errores
}}
onSubmit={(valores, { setSubmitting }) => {
establecerTiempo de espera(() => {
alerta(JSON.stringify (valores, nulo, 2))
setSubmitting(FALSO)
}, 400)
}}
>
{({ está enviando }) => (
<Forma>
<tipo de campo="texto" nombre="nombre" />
<tipo de campo="correo electrónico" nombre="correo electrónico" />
<tipo de botón ="entregar" disabled={está enviando}>
Entregar
</button>
</Form>
)}
</Formik>
)
exportarpor defecto Mi formulario
Aquí, primero importa el Formik, Forma, y Campo componentes de la biblioteca Formik. A continuación, cree un componente llamado MyForm. Este componente genera un formulario que tiene dos campos: nombre y correo electrónico.
La propiedad initialValues establece los valores iniciales de los campos del formulario. En este caso, los campos de nombre y correo electrónico son cadenas vacías.
El accesorio de validación establece las reglas de validación para los campos del formulario. En este caso, el campo de nombre es obligatorio y el campo de correo electrónico debe coincidir con una expresión regular.
El accesorio onSubmit establece la función que React llamará cuando el usuario envíe el formulario. En este caso, la función es una alerta que mostrará los valores de los campos del formulario.
La propiedad isSubmitting determina si el formulario se está enviando actualmente. En este caso, lo establece en falso.
Finalmente, renderice el formulario utilizando el componente Formulario de Formik.
Beneficios de usar bibliotecas externas en Next.js
Hay varios beneficios al usar una biblioteca externa como Formik para validar formularios en Next.js. Una ventaja es que es mucho más fácil mostrar mensajes de error al usuario. Por ejemplo, si no se completa un campo obligatorio, Formik mostrará automáticamente un mensaje de error que incluye una solución sugerida.
Otro beneficio es que Formik puede manejar reglas de validación más complejas. Por ejemplo, puede usar Formik para validar que dos campos son iguales (como una contraseña y un campo de confirmación de contraseña).
Finalmente, Formik facilita el envío de los datos del formulario a un servidor. Por ejemplo, puede usar Formik para enviar los datos del formulario a una API.
Aumente la participación de los usuarios mediante formularios
Puede utilizar formularios para aumentar la participación de los usuarios. Al proporcionar comentarios cuando un usuario ingresa datos no válidos, puede ayudar a evitar la frustración y la confusión.
Usando bibliotecas externas, puede agregar funciones como autocompletado y campos condicionales. Estos pueden ayudar a que sus formularios sean aún más fáciles de usar. Cuando se usan correctamente, los formularios pueden ser una herramienta poderosa para ayudarlo a aumentar la participación de los usuarios y recopilar los datos que necesita.
Además de la validación, Next.js tiene muchas funciones que puede usar para aumentar la participación de los usuarios.