1

tengo un form con un par de inputs y unas validaciones. Al hacer click en submitir está funcionando bien y se envía la información. Incluso si hay un error, después de submitir aparece el mensaje de error. Pero no debería dejarme submitir si aparece ese error, y a pesar que hay errores (por ejemplo que el title es < al lenght que puse) me deja submitir.

Quiero saber cómo prevengo que se submita cuando existen errores

Este es el código que tengo:

import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import IconButton from '@mui/material/IconButton';
import './rating.css';
import { useStateValue } from '../../StateProvider';
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
import { Link, useNavigate } from 'react-router-dom';

//Haciendo rating y addReview todo junto
//Rating
import { Rating as RatingApp } from 'react-simple-star-rating';
import { Button, TextareaAutosize, TextField } from '@mui/material';
import { ShowChart } from '@material-ui/icons';
import { initialState } from '../../reducer';
import { db } from '../../firebase';

//toastify
import { toast } from 'react-toastify';

export default function Rating(props) {
  const [{basket, user}, dispatch] = useStateValue();
  const { id } = useParams()
  const navigate = useNavigate();
  const initialStateValues = {
    title: "",
    review: "",
    loading: "",
    rating: 0,
  };
  const [rating, setRating] = useState(null) // initial rating value
  const [userLogged, setuserLogged] = useState(false);
  const [values, setValues] = useState(initialStateValues);
  const [email,setEmail] = useState();
  const[formErrors, setFormErrors] = useState({});
  const [isSubmit, setIsSubmit] = useState(false);

  firebase.auth().onAuthStateChanged((user) => {
    user ? setuserLogged(true) : setuserLogged(false)
  })

  const handleInputchange = (e) => {
    const { name, value } = e.target;
    setValues({ ...values, [name]: value })
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    props.addNewComment(values);
    setValues({ ...initialStateValues });
    setFormErrors(validate(values));
    setIsSubmit(true);
  };

  useEffect(() => {
    if (Object.keys(formErrors).length === 0 && isSubmit){
      console.log(values);
    }
  },[formErrors]);

  const validate = (values) => {
    const errors = {};
    if (values.title.length < 4) {
      errors.title = "El título tiene que tener por lo menos 4 caracteres";
    } else if (values.title.length === 0) {
    errors.title = "Debes ingresar un título";
    }
    if (values.review.length < 8) {
      errors.review = "El comentario tiene que tener por lo menos 8 caracteres";
    } else if (values.review.length === 0) {
      errors.review = "Debes ingresar un comentario";
    }
    return errors;
  };  

  // Catch Rating value
  const handleRating = (rate) => {
    setRating(rate)
    // Some logic
  }

  const addReview = () => {
    if (!ValidForm()) {
      return
    }
  }

  const ValidForm = () => {
    // setTitleError(null)
    //setReviewError(null)
    let isValid = true
    if (!rating) { //si el usuario no elije rating
      toast.error('Debes darle una puntuación con las estrellas');
      isValid = false
    }
    return isValid
  }

  const getCommentById = async (id) => {
    const doc = await db.collection('comments').doc(id).get();
    setValues({ ...doc.data() })
  }

    useEffect(() => {
    console.log(props.currentId)
    if (props.currentId === '') {
      setValues({ ...initialStateValues });
    } else {
      getCommentById(props.currentId);
    }
  }, [props.currentId]);


  return (
    <div className='RatingSection'>

      <div className='addReview'>
        <form className='formReview' onSubmit={handleSubmit}>
          <div className='ratingStars'>
            <h3>Calificá este libro</h3>
            <h4>¿Cuántas estrellas merece?</h4>
            <RatingApp
              onClick={handleRating}
              ratingValue={rating}
              value={values.rating}
              name='rating'
              size={35}
              label
              transition
              fillColor='#ffff00'
              emptyColor='gray'
              className='stars' // Will remove the inline style if applied
              allowHalfIcon
            //en su version hay onFinishRatin={{value}} =>setRating(value) es una prop de la libreria q el uso
            />
            {/* Use rating value */}
           {rating}

          </div>
          <div className='comments'>
                                 
            <TextField
              placeholder='Titulo'
              className='commentTitle'
              required={true}
              name='title'
              value={values.title}
              onChange={handleInputchange}
              //error={titleError}
              label="Título"
              //helperText={titleMessage}
              variant="outlined"
            />
            <p>{ formErrors.title}</p>
            <TextareaAutosize
              minRows={10}
              className='commentDescription'
              placeholder='¿Qué te pareció el libro?'
              required={true}
              name='review'
              value={values.review}
              onChange={handleInputchange}
              //error={reviewError}
              label="Comentario"
              //helperText={reviewMessage}
              variant="outlined"
            />
            <p>{ formErrors.review}</p>
            {
              userLogged ? (
                <Button
                  type="submit"
                  variant="contained"
                  sx={{ mt: 3, mb: 2 }}
                  onClick={addReview}
                  className='reviewButton'
                  title='Escribe una opinión'>
                  {props.currentId === '' ? 'Subí tu opinión' : 'Actualizá tu opinión'}
                </Button>
              ) : (
                <p className='needLogin' onClick={() => navigate("/signin")}>Hacé clic aquí para loguearte y poder dejar tu opinión.</p>
              )
            }

          </div>

        </form>
      </div>
    </div>
  );
}

Espero que puedan ayudarme, intenté varias cosas pero no encontré ninguna solución por ahora. Gracias, saludos.

6
  • ¿Por qué tienes comentado handleSubmit? Precisamente ese es el método clave. En ese método, sólo si hay errores publicas un comentario o lo que sea que quieras. Si hay errores, no envías nada.
    – Jaime
    Commented el 27 may. 2022 a las 20:40
  • Hola @JaimeMenéndez , perdón como estuve probando de distintas formas, me quedó comentado. Pero fijate que tengo otro handleSubmit, que es: ``` const handleSubmit = (e) => { e.preventDefault(); props.addNewComment(values); setValues({ ...initialStateValues }); setFormErrors(validate(values)); setIsSubmit(true); }; ``` Commented el 27 may. 2022 a las 20:43
  • Si, discúlpame a mi, me di cuenta leyendo mejor. ¿Por qué no validas en ese método? Ahí es donde debes validar antes de agregar un comentario o tomar una acción. No veo que valides nada.
    – Jaime
    Commented el 27 may. 2022 a las 20:44
  • Estuve siguiendo un tutorial y para validar hace una const validate y despues la pasa en handleSubmit haciendo: setFormErrors(validate(values)); Cómo lo harías tú? Commented el 27 may. 2022 a las 20:46
  • Yo llamaría a const errores = validate(values), Si NO me devuelve errores (if(Object.keys(errores).length === 0)), entonces solo ahí dentro del if agrego el comentario. De lo contrario, muestro los errores pero sin enviar el formulario.
    – Jaime
    Commented el 27 may. 2022 a las 20:50

1 respuesta 1

1

Prueba evitando submitir el formulario si hay errores usando un condicional:

const handleSubmit = (e) => {
    e.preventDefault();
    const errores = validate(values)
    if(Object.keys(errores).length === 0) {
       props.addNewComment(values);
       setValues({ ...initialStateValues });
       setIsSubmit(true);
    } 
    setFormErrors(errores);
};
1
  • Excelente!! Muchas gracias Jaime por tu ayuda! Commented el 27 may. 2022 a las 21:12

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.