React useFormValidate Hook

Este hook de React proporciona funcionalidades para gestionar el estado y la validación de formularios de manera sencilla.

Instalación

Puedes instalar el hook utilizando npm:

1npm install --save use-form-validate

Uso

1import React from 'react';
2import {useFormValidate} from 'use-form-validate';
3
4const MyFormComponent = () => {
5  const {
6    inputs,
7    handleChange,
8    errors,
9    setError,
10    clearError,
11    validate,
12    handleSubmit,
13    getFieldProps,
14    getFieldError,
15    resetForm
16  } = useFormValidate();
17
18  const onSubmit = (formData) => {
19    // Lógica para manejar el envío del formulario
20    console.log('Formulario enviado:', formData);
21  };
22
23  return (
24    <form onSubmit={handleSubmit(onSubmit)}>
25      <div>
26        <label htmlFor="fieldName">Campo de Ejemplo:</label>
27        <input
28          type="text"
29          id="fieldName"
30          {...getFieldProps('fieldName', { required: true })}
31        />
32        <span style={{ color: 'red' }}>{getFieldError('fieldName')}</span>
33      </div>
34
35      {/* Agrega más campos del formulario según tus necesidades */}
36
37      <div>
38        <button type="submit">Enviar</button>
39      </div>
40    </form>
41  );
42};
43
44export default MyFormComponent;

Funcionalidades

• handleChange(name, value): Actualiza el valor de un campo en el estado.
• updateInput(name, updatedProperties): Actualiza propiedades específicas de un campo en el estado.
• removeInput(name): Elimina un campo del estado.
• setError(name, message): Establece un mensaje de error para un campo específico.
• clearError(name): Limpia el mensaje de error para un campo específico.
• validate(name, value, rules): Realiza la validación de un campo según reglas específicas.
• handleSubmit(onSubmit): Maneja la lógica de envío del formulario, ejecuta la validación y llama a la función onSubmit si el formulario es válido.
• getFieldProps(name, rules, anotherValue,defaultValue): Proporciona props para un campo específico, incluido el valor, el manejo de cambios y el estado de error.
• resetForm(): Permite reiniciar el formulario.

Reglas de Validación

El useFormValidate hook proporciona varias funcionalidades para facilitar la gestión de formularios, junto con reglas de validación personalizadas. Aquí hay un resumen de las reglas de validación disponibles:

• errorBoolean: Si el input trabaja con error pero es de tipo booleano.

  1getFieldProps('fieldName', { errorBoolean: true })

• required: Campo obligatorio.

  1getFieldProps('fieldName', { required: true })

• helperText: Permite establecer cual es la propiedad que muestra el mensaje de error (Es mas util cuando se usa alguna librería como MUI o se crean componentes que reciben el mensaje de error por props).

  1getFieldProps('fieldName', { helperText: 'helperText' })

• value: Permite establecer un valor por defecto.

  1getFieldProps('fieldName', { value: 'valor inicial' })

• minLength: Mínimo número de caracteres permitidos.

  1getFieldProps('fieldName', { minLength: 5 })

• maxLength: Máximo número de caracteres permitidos.

  1getFieldProps('fieldName', { maxLength: 10 })

• money: Valor debe ser un formato de dinero válido.

  1getFieldProps('amount', { money: true })

• phone: Valor debe ser un formato de numero válido.

  1getFieldProps('telephone', { phone: true })

• isEqual: Igualdad con otro campo.

  1getFieldProps('password', { isEqual: 'confirmPassword' })

• email: Debe ser un correo electrónico válido.

  1getFieldProps('email', { email: true })

• date: Debe ser una fecha válida.

  1getFieldProps('eventDate', { date: true })

• checkbox: Para inputs de tipo checkbox.

  1getFieldProps('check_input', { checkbox: true })

• radio: Para inputs de tipo radio.

  1  <input 
  2    type="radio"
  3    { ...getFieldProps('radio_input', { radio: true })}
  4    value="option1"
  5  />
  6  <input 
  7    type="radio"
  8    { ...getFieldProps('radio_input', { radio: true })}
  9    value="option2"
  10  />

• file: Para inputs de tipo file.

  1getFieldProps('file_input', { file: true })

• onBlur: Ejecuta la validación cuando pierde el foco.

  1getFieldProps('fieldName', { onBlur: true })

• validate: Validación personalizada con una función.

  1getFieldProps('customField', {
  2  validate: (value, allInputs) => {
  3    // Lógica de validación personalizada
  4    return true; // Devuelve `true` si la validación es exitosa, un mensaje de error si falla.
  5  }
  6})

• errorLabel: Permite modificar el mensaje de error.

  1getFieldProps('fieldName', { required:true, errorLabel: "Verifica el campo antes de continuar" })

Ejemplo de uso de getFieldProps y getFieldError

1const {
2  getFieldProps,
3  getFieldError,
4} = useFormValidate();
5
6// ...
7
8<input
9  type="text"
10  id="fieldName"
11  {...getFieldProps('fieldName', { required: true, minLength: 3, maxLength: 10 })}
12/>
13<span style={{ color: 'red' }}>{getFieldError('fieldName')}</span>

Con estas reglas, puedes personalizar la validación de cada campo de acuerdo con tus requisitos específicos. ¡Experimenta con ellas y ajusta según sea necesario para tu aplicación!

Personalización de Mensajes de Error

Puedes personalizar los mensajes de error pasando un objeto al hook. Los mensajes pueden incluir marcadores de posición, como {minLength}, {maxLength}, o {customMessage}, que se reemplazarán con los valores correspondientes durante la validación.

1const customErrorMessages = {

2  is_type_file: 'Debe seleccionar un archivo',

3  is_type_checkbox: 'Debe seleccionar al menos una opción',

4  is_type_radio: 'Debe seleccionar una opción',

5  is_required: 'Campo obligatorio',

6  is_type_money: 'Debe ser un valor numérico válido para dinero',

7  min_length: 'El campo debe tener al menos {minLength} caracteres',

8  max_length: 'El campo no debe exceder los {maxLength} caracteres',

9  fields_not_match: 'Los campos no coinciden',

10  invalid_email: 'Ingrese un correo electrónico válido',

11  invalid_phone: 'Ingrese un numero telefónico válido',

12  invalid_date: 'Ingrese una fecha válida',

13  invalid_url: 'Ingrese una url válida',

14  custom_validation: 'Error de validación personalizada: {customMessage}',
15};
16
17const {
18  // ... otras props del hook
19} = useFormValidate(customErrorMessages);

Contribuciones

Las contribuciones son bienvenidas. Si encuentras algún error o tienes sugerencias para mejorar este hook, no dudes en abrir un problema o enviar un pull request.

Licencia

Este proyecto está bajo la Licencia MIT - ver el archivo LICENSE para más detalles.