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>
)
}