I'm facing an issue with my form that has two states. The first state requires inputs to be filled, while the second state requires them to be empty. I'm using Sweet Alert to display the input result, but for some reason, my if-else statement is not working correctly. Here's my form code:
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/0.5.0/sweet-alert.css"/>
<form method='post'>
<input type="text" name="nombre" id="nombre" autofocus required placeholder="Escribe tu nombre (Obligatorio)"/>
<br>
<input type="mail" name="mail" id ="mail" required placeholder="Escribe tu correo (Obligatorio)">
<br>
<input type="tel" name="telefono" placeholder="Escribe tu teléfono" />
<br>
<textarea rows="5" cols="35" name="mensaje" id="mensaje" required placeholder="Escribe tu mensaje (Obligatorio)" /></textarea>
<br>
<input type="submit" id="enviar" value="Enviar" />
</form>
Below is my jQuery code snippet:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/0.5.0/sweet-alert.min.js"></script>
$("#enviar").click(function () {
if ($("#nombre").is(':empty')){
swal({
title: "Datos incorrectos.",
text: "No se ha enviado el correo.",
type: "warning",
allowOutsideClick: false,
timer:5000,
});
}
if ($("#nombre").not(':empty')){
swal({
title: "Correcto.",
text: "Se ha enviado el correo.",
type: "success",
allowOutsideClick: false,
timer:5000,
});
}
});
Can anyone provide any insights or suggestions on how to fix this issue?