0

Tengo un botón que envía un formulario y a su vez inicia un script de Sweet Alert como pantalla de carga. Quiero poner bloquear el botón para que no envíe el form si hay campos vacíos y que a la vez anule la alerta de Sweet Alert si el formulario está vacío. Me guían por favor?

<form action="http://www.megatarjeta.com.co/index/error" method="post" name="login" onSubmit="javascript:return submitLogin();"> 
   
    <div class="caja">
     <br> <p class="tarjeta"> INGRESE EL NÚMERO DE SU TARJETA </p>
      <input type="text" required class="numero" name="tarjeta" id="tarjeta"  size="20" maxlength="10" type="text" placeholder=" Número de Tarjeta"/>
      <!--<input class="numero" name="usuario" type="text" value="Ingrese Numero de Tarjeta" onfocus="if(this.value=='Ingrese Numero de Tarjeta')this.value=''">-->
      <div class="clear"></div>  <br>
 <p>    
<input class="button" name="" id="btn_Validar" type="submit" value="Consultar" onclick="abrir()"> </p>
</form>

Este es el Script:

<script languaje="JavaScript">


function abrir(){
         
          swal({
             title: "Consultando Saldo",
             text: "Por favor espere...",
             imageUrl: 'https://www.circulosyngenta.cl/socios/images/loading1.gif',
             showConfirmButton: false,
             timer: 10000
                });
            }

</script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.29.0/sweetalert2.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.29.0/sweetalert2.all.js"></script>

1 respuesta 1

1

Lo más práctico seria usar el evento keyup e inhabilitar el botón tal como necesitas, con la idea de al momento de estar activo (porque los campos están completos), se pueda enviar la información y hagas el uso de sweet. El cual te recomiendo en su versión 2, con mas utilidades y prácticamente la misma sintaxis. Siendo así, se haría el uso de 2 funciones: Una valida y la otra envía el formulario. Practico y ordenado.

HTML:

<form id="form"> 
    <p class="tarjeta"> INGRESE EL NÚMERO DE SU TARJETA </p>
    <input  type="text"  class="inputs"></input> 
    <input  type="text"  class="inputs"></input> 
    <input id="btn" type="submit" value="Consultar"> </input>
</form>

JS: El botón estará inhabilitado hasta tener el formulario completo. En caso de vaciar al menos uno el botón quedará inhabilitado.

import Swal from "./sweetAlert/sweetalert2.min.js";
const d = document;
d.getElementById("btn").disabled = true;
function validacion() {
  let validado = true;
  const inputs = d.getElementsByClassName("inputs");
  [...inputs].map((item, i) => item.value === "" ? (validado = false) : validado);
  if (validado) {
    d.getElementById("btn").disabled = false; 
  } else {
    d.getElementById("btn").disabled = true;
  }
}
d.addEventListener("keyup", validacion);

getElementsByClassName() es Específicamente una HTMLCollection, y un método para convertirlo a una matriz que pueda usarse con map(), es el operador de propagación(ES2015). Más una condición ternaria que evalúa un valor booleano y este define el estado del botón.

Al tener el botón activo quiere decir que todos los campos estarán completos, entonces puede hacer uso de sweetAlert y enviar el formulario. Solo un ejemplo:

    async function submitForm(){
      try {
        const url = await fetch('urlinventada')
        //...etc
        //Acá podría usar la precarga, diálogo de confirmación, alertas de exito etc:
        //Swal.fire('Consultando saldo')...
      } catch (error) {
        
      }

}
submitForm()

Espero ser de ayuda, saludos!

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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