1

Estoy practicando con formularios, estoy intentando hacer una validación de un formulario en dónde se pide el nombre y el email. Estoy usando React para ello, a continuación el componente:

/* Custom Hooks */
import useForm from './hooks/useForm.js';

/* Styles */
import './css/styles.css';

const validateFormSchema = {
    name: {
        required: 'Por favor ingresa un nombre.',
        min: {
            limit: 7,
            message: limit => `El límite es de ${limit} carácteres.`
        }
    },
    email: {
        required: 'Por favor debe ingresar su correo electrónico',
        isEmail: true,
    }
}

const Form = () => {

    const { values, setFieldValue, errors, handleSubmit } = useForm({
        initialValues: {
            name: '',
            email: ''
        },
        validationSchema: validateFormSchema,
        onSubmit: values => {
            // alert('You are logged!');
        }
    })

  return (
    <form id="container" onSubmit={handleSubmit}>
    <h2>Formulario:</h2>
    <input
        type="text"
        value={values.name}
        className="textInput"
        placeholder="Ingresa un nombre"
        onChange={e => setFieldValue('name', e.target.value)}
    />

    {errors.name && <span className="error-message">{errors.name}</span>}

    <input
        type="text"
        value={values.email}
        className="textInput"
        placeholder="Ingresa un email"
        onChange={e => setFieldValue('email', e.target.value)}
    />

    {errors.email && <span className="error-message">{errors.email}</span>}

    <button type="submit" id="button">Enviar</button>
    </form>
  );
}

export default Form;

Solamente tengo este componente que lo uso desde index.js, aparte tengo dos custom hooks en donde realizo toda la lógica del formulario: useForm y useValidation. En este componente uso sólo el hook useForm, estoy intentando hacer una lógica parecida como Formik o React Hooks Form, he usado ambos pero no tengo el resultado esperado por eso preferí hacerlo por mi cuenta.

Bien useForm retorna 4 propiedades: values, setFieldValue, errors, handleSubmit, y acepta 3 propiedades: initialValues, validationSchema, onSubmit. A continuación el hook useForm en donde tiene comentado su funcionamiento:

/* React components */
import { useState, useEffect } from 'react';
/* Custom hooks */
import { validateField, validateEmail } from './useValidation';

/* Hook para validar formulario */
const useForm = ({
    /* Añado por ahora 3 propiedades que serán los valores iniciales del formulario (initialValues), válido el formulario con validationSchema que es un obj que define las reglas en los campos, y onSubmit se debería ejecutar cuando el formulario es válido */
    initialValues,
    validationSchema,
    onSubmit
}) => {

    const [values, setValues] = useState(initialValues),
    [errors, setErrors] = useState({}),

    runValidationSchema = (property, value) => {

        let result;

        if (validationSchema) {
            /* primero verifico si existe el Schema, acontinuación si tiene una propiedad llamada isEmail que válida correos electrónicos, para ello el Schema debe tener propiedades que se llamen iguales a los 'values' */

            if (validationSchema[property].isEmail) {
                /* Si se cumple la condición entonces llamamos a la función validateEmail, que acepta un obj como parámetro y tres propiedades, el valor del email (texto) que se testea en la función, required: si el email está vacío, y validEmail, ambos retornan un mensaje dependiendo de cuál condición se cumple  */
                result = validateEmail({
                    value,
                    required: validationSchema[property].required, /* Cómo mensaje le pasamos la propiedad required del Schema dependiendo del campo */
                    validEmail: validationSchema[property].validEmail /* Cómo mensaje le pasamos la propiedad validEmail del Schema dependiendo del campo */
                });
            } else {
                /* Válida un campo si este, está vacío o se ha definido un límite de carácteres, validateField recibe 5 propiedades, el nombre del campo (name), el valor, un mensaje si el valor está vacío (emptyValue), min, el límite de carácteres, y shortValue, el mensaje que se muestra cuando min se cumple  */
                const min = validationSchema[property].min.limit;
                result = validateField({
                    name: property,
                    value,
                    emptyValue: validationSchema[property].required,
                    min,
                    shortValue: validationSchema[property].min.message(min)
                });
            }

            setErrors({...errors, [property]: result[property] });
            
        }
    },

    runValidateAllFields = () => {
        //// función para validar en todos los campos al presionar en el botón
    },
    
    setFieldValue = (property, value) => {
        setValues({...values, [property]: value}); /* cambio el valor dependiendo del campo que se está focuseando */
        runValidationSchema(property, value);
    },

    handleSubmit = e => {
        e.preventDefault();
        runValidateAllFields();
        return onSubmit(values);
    },

    resetForm = () => {
        setValues(initialValues);
        setErrors({});
    }

    // useEffect(() => {
    //  console.log(errors);
    // }, [errors]);

    return {
        values,
        setFieldValue,
        errors,
        handleSubmit
    }
}

export default useForm;

Dentro de ese hook llamó al hook useValidation que realiza las validaciones en los valores:

const validateField = field => {
  const errors = {};
    if (field.value === '') {
      errors[field.name] = field.emptyValue
    } else if (field.value.length < field.min) {
      errors[field.name] = field.shortValue || `Debe tener un mínimo de ${field.min} cáracteres`
    }
  return errors;
}

const validateEmail = email => {
  const errors = {},
    isValidEmail = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  if (email.value === '') {
    errors.email = email.required || 'Por favor ingresa tu correo electrónico';
  } else if (!isValidEmail.test(email.value)) {
    errors.email = email.validEmail || 'Ingresa un correo electrónico válido';
  };
  return errors;
}

module.exports = { validateField, validateEmail }

Mi problema es que deseo validar el formulario desde el botón, paso como función de onSubmit handleSubmit del hook useForm , al hacer click en este debe mostrar los mensajes de error dependiendo si no se cumplen las condiciones dadas en validationSchema.

Otra cosa que he notado, es que cuando el mensaje de error no existe lo sigue manteniendo en el estado errors.

Ejm: {name: undefined, email: undefined}

¿Cómo podría hacer para validar todos los campos desde el botón y eliminar las propiedades en caso que sean undefined sus valores?, si todas las propiedades de errors son undefined, debe mostrar un obj vacío.

Muchas gracias de antemano, dejo el github: link. Aquí una demostración en vivo: link

2 respuestas 2

0

Después de testear el código muchas veces, pude crear un hook que valida el valor de un input si esta vacío, la longitud mínima de carácteres y validación de emails. Nose si alguien más le sirva, lo usaré en mis proyectos para validar formularios, aunque falta agregarle más validaciones, por ahora todo funciona ok.

Código: link

Prueba en tiempo real: link

0

Ya que vas a correr useValidation dentro de useForm... porque no lo añades completo al useForm?

Otra duda. Input type email en vez de text, no seria mejor?

Aunque valides la forma el formato del email, no puedes validar si es un email real.

2
  • La razón por la que creo un nuevo archivo (useValidation) es debido a que en el se hacen las condiciones para los valores del formulario, en caso de que tengas una condición muy larga y copies todo lo que está en useValidación dentro de useForm, el código será muy largo. Creo que eso es cuestión de cada quien de como organiza su trabajo.
    – Husdady
    Commented el 26 jun. 2021 a las 19:36
  • Si olvidé eso de cambiar el type del input, no creo que sea mucho problema. Eso de validar si un email es real, es muy difícil yo creo, nunca sabes cómo es el usuario. Puedes usar el código y mejorarlo a tu gusto
    – Husdady
    Commented el 26 jun. 2021 a las 19:41

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.