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