Cómo validar formularios con Next.js

¿Alguna vez ha intentado enviar un formulario, solo para que la página web le dé un mensaje de error que le indica que uno o más 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 las direcciones de correo electrónico hasta las fechas, si va a ser preciso, debe verificarlo con cuidado.

¿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. También puede validar en el cliente usando JavaScript, y las bibliotecas externas de Next.js están disponibles para 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 la 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 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 módulos en Next.js

Hay dos formas de validar módulos en Next.js: usando métodos integrados o usando bibliotecas externas.

Uso de métodos integrados

HTML proporciona varios métodos para validar formularios, el más común de los cuales es el necesario atributo. Esto asegura que un campo no puede estar vacío. 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 modelo atributo. Puede usarlo junto con una 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.

import React from 'react'
class MyForm extends React.Component {
render() {
return (
<form >
<label>
Name:
<input type="text" name="name" required />
</label>
<label>
Email:
<input type="email" name="email"
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" />
</label>
<input type="submit" value="Submit" />
</form>
)
}
}
export default MyForm

Este código importa la biblioteca React, luego crea una clase llamada MyForm y representa un elemento de formulario. Hay dos elementos de etiqueta dentro del elemento de formulario.

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 haya rellenado el campo de nombre. El atributo de plantilla de campo de correo electrónico garantiza que el correo electrónico tenga el formato especificado. Si alguna de estas condiciones no se cumple, el formulario no será enviado.

Existen algunos inconvenientes en el uso de 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 de ellos. Finalmente, 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 install formik

Después de instalar la biblioteca, puede importarla a su componente y usarla para validar su módulo:

import React from 'react'
import { Formik, Form, Field } from 'formik'
const MyForm = () => (
<Formik
initialValues={{ name: '', email: '' }}
validate={values => {
const errors = {}
if (!values.name) {
errors.name = 'Required'
}
if (!values.email) {
errors.email = 'Required'
} else if (
!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
) {
errors.email = 'Invalid email address'
}
return errors
}}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2))
setSubmitting(false)
}, 400)
}}
>
{({ isSubmitting }) => (
<Form>
<Field type="text" name="name" />
<Field type="email" name="email" />
<button type="submit" disabled={isSubmitting}>
Submit
</button>
</Form>
)}
</Formik>
)
export default MyForm

Aquí, primero importas el archivo Formik, MóduloY Campo componentes de la biblioteca Formik. Luego, cree un componente llamado MyForm. Este componente genera un formulario con 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 advertencia que mostrará los valores de los campos del formulario.

La prop isSubmitting determina si el formulario se está enviando actualmente. En este caso, lo establece en falso.

Finalmente, renderice el formulario utilizando el componente Form de Formik.

Ventajas de usar bibliotecas externas en Next.js

Hay varias ventajas de usar una biblioteca externa como Formik para validar formularios en Next.js. Una ventaja es que es mucho más fácil ver los mensajes de error para el usuario. Por ejemplo, si no se completa un campo obligatorio, Formik mostrará automáticamente un mensaje de error que incluye una solución sugerida.

Otra ventaja es que Formik puede manejar reglas de validación más complejas. Por ejemplo, puede usar Formik para verificar que dos campos sean iguales (como una contraseña y un campo de confirmación de contraseña).

Finalmente, Formik facilita el envío de datos de formulario a un servidor. Por ejemplo, puede usar Formik para enviar datos de formulario a una API.

Aumente la participación de los usuarios mediante el uso de 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 autocompletar 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.