tengo un formulario en html el cual cuenta con un evento "Onsubmit", este me permite detener el envió del formulario y me muestra una alerta de confirmación:
El Form:
Dentro del Form cuento con un input para ingresar un numero telefónico, lo que quiero saber es si es posible crear una condicion if, para que cuando el input se encuentre vacio, el evento Onsubmit no se ejecute y que por otro lado cuando al input le ingresen el numero telefonico, el evento Onsubmit si se ejecute
<form name="Formulario" id="form" action="/notes/new-note" method="POST" onsubmit="return enviar()">
<div class="newreport mb-3">
<label for="area">Área:</label>
<input
type="text"
name="area"
class="color-back form-control"
placeholder="Área"
autofocus
/>
</div>
<div class="newreport mb-3">
<label for="nombre">Nombre:</label>
<input
type="text"
name="nombre"
class="color-back form-control"
placeholder="Nombre"
/>
</div>
<div class="newreport mb-3">
<label for="asunto">Asunto:</label>
<input
type="text"
name="asunto"
class="color-back form-control"
placeholder="Asunto"
autofocus
/>
</div>
<div class="newreport mb-3">
<label for="prioridad">Prioridad:</label>
<select
onchange="cambio(this)"
type="text"
name="prioridad"
class="color-back cambio-color form-control"
placeholder="Prioridad"
autofocus>
<option value="Elegir opcion">Elige una opción</option>
<option value="Alta">Alta</option>
<option value="Media">Media</option>
<option value="Baja">Baja</option>
</select>
</div>
<div class="newreport mb-3">
<label for="mensaje">Mensaje:</label>
<textarea
onchange="cambio(this)"
name="mensaje"
class="color-back form-control"
placeholder="Mensaje"
></textarea>
</div>
<div class="newreport mb-3">
<label for="smsnumber">Telefono:</label>
<p class="aviso">Solo llenarse en caso de querer enviar el campo de arriba como un mensaje de texto</p>
<input
id="target"
name="smsnumber"
class="color-back form-control"
placeholder="Numero telefonico"
></input>
</div>
<div class="newreport mb-3">
<label for="fecha">Fecha:</label>
<input
type="date"
name="fecha"
class="color-back form-control"
placeholder="Fecha"
autofocus
/>
</div>
<input class="btn btn-primary w-100" type="submit" value="Enviar">
</form>
Mi función del evento Onsubmit:
<script>
function enviar(){
event.preventDefault();
Swal.fire({
title: '¿Desea enviar un mensaje sms?',
type: 'warning',
showCancelButton: true,
confirmButtonText: 'Si',
cancelButtonText: "No",
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
}).then((result) => {
if (result.value) {
document.Formulario.submit();
}
return false;
})
}
</script>