0

Tengo un formulario en mi pagina donde tengo multiples campos y a cada uno, uno por uno valido si el campo esta vacio pero hay ocasiones donde debo validar 10 campos y mi codigo se extiende mucho, hay alguna manera de simplificar todo este codigo ?

if(negocioName == '' || negocioName == null){
        setErrorT1(true)
        toast.error('Nombre de unidad de negocio vacío', {
            position: "top-right",
            autoClose: 2000,
            hideProgressBar: false,
            closeOnClick: true,
            pauseOnHover: true,
            draggable: true,
            progress: undefined,
            });
            setActive(false)
    return;
    } else {setErrorT1(false)}

    if(location == null || location == ''){
        setErrorT3(true)
        toast.error('Debes seleccionar una ubiación', {
            position: "top-right",
            autoClose: 2000,
            hideProgressBar: false,
            closeOnClick: true,
            pauseOnHover: true,
            draggable: true,
            progress: undefined,
            });
            setActive(false)
    return;
    }else {setErrorT3(false)}
    if(logo == null || logo == ''){
        toast.error('Debes seleccionar una imagen', {
            position: "top-right",
            autoClose: 2000,
            hideProgressBar: false,
            closeOnClick: true,
            pauseOnHover: true,
            draggable: true,
            progress: undefined,
            });
            setActive(false)
    return;
    }

por cada campo vacio yo mando un toast con un mensaje de campo vacio

1
  • Has intentado meter tus validaciones dentro de un método? Y solo estar llamando al método y este te devuelva True o False
    – Alfa Rojo
    Commented el 8 sept. 2021 a las 18:02

2 respuestas 2

1

Puedes usar una funcion para comprobar si se encuentra vacio un campo :

function validar(campo){
    if(campo == null || campo == undefined || campo == ""){
        //si esta indefinido el valor ejecuta el toast
    }
}

Ya luego es solo usarla con tus campos:

validar(negocioName);
validar(location);

Esto te ahorrara un poco de trabajo.

0

podrias crear un custom hoock y solo validarlo en el formulario, si algun campo esta vacio lanzar una alerta:

custom hook para campos de texto

const { useState } = require("react")

const useField = (type) => {
    const [value, setValue] = useState('')
  
    const onChange = (event) => {
      setValue(event.target.value)
    }
  
    return {
      type,
      value,
      onChange
    }
  }

export default useField

para usarlo en tu formulario solo llamas el hook cuantas veces lo necesites:

const userName = useField('text')
const userPassword = useField('password')

y en el submit del formulario podrias evaluar si el campo esta vacio

if(userName.value === '' || userPassword.value === ''){
      return alert('alert!')
  }

para mostrar el error puedes crear un componente y con props le pasas la informacion que quieres que muestre, asi no lo escribes cada vez que tienes un error

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.