0

Estoy armando un formulario en React donde tengo 3 campos que son requeridos y necesito que al apretar el botón de enviar aparezca una alerta.

El problema es que aunque los campos no estén llenos si apreto el botón de enviar igual salta la alerta enviado. Necesito que si los campos estén vacios, no muestre la alerta de enviado al momento de dar clic al botón de enviar. Estoy usando emailJS y para las alertas sweetalert2. Gracias

const Contact = () => {
  const form = useRef();

  const sendEmail = (e) => {
    e.preventDefault();

    emailjs.sendForm()

    e.target.reset()
  };

  const mostrarAlerta=()=>{

    swal.fire({
      title: "¡Listo!",
      text: "El mensaje ha sido enviado",
      icon: "success",
      confirmButtonText: "Aceptar"
    })
  }

  return (
    <section id='contact'>

      <div className='container contact__container'>
        <div className='contact__options'>
          <article className='contact__option'>
            <MdOutlineEmail className='contact__option-icon'/>
          </article>

          <article className='contact__option'>
            <BiPhoneCall className='contact__option-icon'/>
          </article>

          <article className='contact__option'>
            <BsWhatsapp className='contact__option-icon'/>
          </article>
        </div>

        <form ref={form} onSubmit={sendEmail && mostrarAlerta()}>
          <input type="text" name="name" placeholder="Tu Nombre" required/>
          <input type="email" name="email" placeholder="Tu Mail" required/>
          <textarea name="message" rows="7" placeholder='Tu Mensaje' required></textarea>
          <button type='submit' className='btn btn-primary'>Enviar Mensaje</button>
        </form>
      </div>
    </section>
  )
}
1
  • Hola 👋! Podrías crear una validación que para que cuando los campos (almacenados en algún state) no tengan algún valor almacenado no deje ejecutarse la función que dispara el mensaje
    – Richi
    el 26 feb. 2022 a las 21:37

1 respuesta 1

0

A mí me funcionó de esta manera

al pasar los datos a emailjs, produce una respuesta si fue efectivo el envío del email, y según la respuesta le envió el alert

function Contact() {

   
  const sendEmail = (e) => {
    e.preventDefault();
    const alert = withReactContent(Swal);

    const target = e.target as typeof e.target

    emailjs.sendForm('service_id', 'template_id', target , '_id')
    .then(response => {  // aca capturo la respuesta con el .then y una validacion segun la respuesta
      console.log(response);
      if(response.status === 200){
        alert.fire({
          icon: 'success',
          title: <h2>Mesaje enviado con EXITO!!</h2>,
          html: <p>Respondere lo mas pronto posible</p>,
          timer: 7000,
        })
        
      }
    })
    .catch(error => console.log(error))    
  }

  return (
    <section id='contact' className="py-10 px-3 text-white">
      <div className="text-center mt-8">
        <h3 className="text-4xl font-semibold">Contacta<span className="text-cyan-600">me</span></h3>
        <p className="text-gray-400 mt-3 text-lg">Ponerse en Contacto</p>
      </div>
      <div className="mt-16 flex md:flex-row flex-col gap-6 max-w-5xl bg-gray-800 p-6 rounded-lg mx-auto">
        <form onSubmit={sendEmail} className="flex flex-col flex-1 gap-6" action="">
          <input type="text" defaultValue="" name="user_name" placeholder="Tu Nombre" required />
          <input type="email" defaultValue="" name="user_email" placeholder="Tu Correo"  required/>
          <textarea placeholder="Tu Mensage" defaultValue="" name="message" rows={10} required></textarea>
          <button type="submit" className="btn-primary w-fit">Enviar Mensaje</button>
        </form>
        <div className="flex flex-col gap-7">
          {
            contact?.map((contact, i: number) => (
              <div key={i} className="flex gap-4 w-full items-center">
                <div  className='min-w-[3.5rem] text-4xl min-h-[3.5rem] flex items-center justify-center text-white bg-cyan-600 rounded-full'>
                  <a href={contact.link} target='_blank'>
                    <IonIcon name={contact.icon}></IonIcon>
                  </a>                    
                </div>
                <p>{contact.text}</p>
              </div>
            ))
          }
        </div>
      </div>
    </section>
  )
}
1
  • Ya realice la edición de la respuesta, espero se pueda entender el 12 nov. 2022 a las 14:12

Tu Respuesta

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

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