domingo 7 julio 2024

Cómo validar formularios en React

1. Crear un nuevo proyecto de React
2. Crear un formulario básico en React
3. Validación básica del formulario
4. Uso de bibliotecas para la validación
5. Agregar estilos y mensajes de error

1. Crear un nuevo proyecto de React

Primero, crea un nuevo proyecto de React si aún no lo tienes:

npx create-react-app mi-formulario
cd mi-formulario

2. Crear un formulario básico en React

Crea un componente para el formulario. Por ejemplo, Formulario.js:

import React, { useState } from 'react';

const Formulario = () => {
  const [formData, setFormData] = useState({
    nombre: '',
    email: '',
    password: ''
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({
      ...formData,
      [name]: value
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Nombre:</label>
        <input
          type="text"
          name="nombre"
          value={formData.nombre}
          onChange={handleChange}
        />
      </div>
      <div>
        <label>Email:</label>
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
        />
      </div>
      <div>
        <label>Password:</label>
        <input
          type="password"
          name="password"
          value={formData.password}
          onChange={handleChange}
        />
      </div>
      <button type="submit">Enviar</button>
    </form>
  );
};

export default Formulario;

3. Validación básica del formulario

Puedes agregar validación básica utilizando el estado para manejar errores:

const Formulario = () => {
  const [formData, setFormData] = useState({
    nombre: '',
    email: '',
    password: ''
  });

  const [errors, setErrors] = useState({});

  const validate = () => {
    const errors = {};
    if (!formData.nombre) errors.nombre = "El nombre es obligatorio";
    if (!formData.email) errors.email = "El email es obligatorio";
    else if (!/\S+@\S+\.\S+/.test(formData.email)) errors.email = "El email no es válido";
    if (!formData.password) errors.password = "La contraseña es obligatoria";
    return errors;
  };

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({
      ...formData,
      [name]: value
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const validationErrors = validate();
    setErrors(validationErrors);
    if (Object.keys(validationErrors).length === 0) {
      console.log(formData);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Nombre:</label>
        <input
          type="text"
          name="nombre"
          value={formData.nombre}
          onChange={handleChange}
        />
        {errors.nombre && <p>{errors.nombre}</p>}
      </div>
      <div>
        <label>Email:</label>
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
        />
        {errors.email && <p>{errors.email}</p>}
      </div>
      <div>
        <label>Password:</label>
        <input
          type="password"
          name="password"
          value={formData.password}
          onChange={handleChange}
        />
        {errors.password && <p>{errors.password}</p>}
      </div>
      <button type="submit">Enviar</button>
    </form>
  );
};

export default Formulario;

4. Uso de bibliotecas para la validación

Para validaciones más avanzadas, puedes usar bibliotecas como Formik y Yup.

Instalar Formik y Yup

npm install formik yup

Ejemplo usando Formik y Yup

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';

const validationSchema = Yup.object({
  nombre: Yup.string().required('El nombre es obligatorio'),
  email: Yup.string().email('El email no es válido').required('El email es obligatorio'),
  password: Yup.string().required('La contraseña es obligatoria')
});

const FormularioFormik = () => {
  return (
    <Formik
      initialValues={{ nombre: '', email: '', password: '' }}
      validationSchema={validationSchema}
      onSubmit={(values, { setSubmitting }) => {
        console.log(values);
        setSubmitting(false);
      }}
    >
      {({ isSubmitting }) => (
        <Form>
          <div>
            <label>Nombre:</label>
            <Field type="text" name="nombre" />
            <ErrorMessage name="nombre" component="div" />
          </div>
          <div>
            <label>Email:</label>
            <Field type="email" name="email" />
            <ErrorMessage name="email" component="div" />
          </div>
          <div>
            <label>Password:</label>
            <Field type="password" name="password" />
            <ErrorMessage name="password" component="div" />
          </div>
          <button type="submit" disabled={isSubmitting}>
            Enviar
          </button>
        </Form>
      )}
    </Formik>
  );
};

export default FormularioFormik;

5. Agregar estilos y mensajes de error

Puedes mejorar la apariencia de tu formulario y los mensajes de error con CSS:

form div {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input {
  padding: 8px;
  width: 100%;
  box-sizing: border-box;
}

div div {
  color: red;
  font-size: 12px;
}

Y asegúrate de importar tu archivo CSS en tu componente de formulario:

import './Formulario.css';

Con estos pasos, tendrás una base sólida para crear y validar formularios en React. Puedes extender esta guía según tus necesidades específicas, agregando validaciones personalizadas, manejo de formularios dinámicos, o integración con bibliotecas de gestión de estado como Redux.

Etiquetas:

react javascript desarrollo web

Creado por:

Jorge García

Fullstack developer