none
problemas con Sweet Alert 2 html js RRS feed

  • Pregunta

  • <!DOCTYPE html>
    <html lang="en">
      <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
        <link href="https://fonts.googleapis.com/css2?family=Spartan:wght@300;600&display=swap" rel="stylesheet">
        <script src="https://kit.fontawesome.com/ffec4ec2ed.js" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="plugins/sweetAlert2/sweetalert2.min.css">
        <link rel="stylesheet" href="css/style.css" />
    
        <title>Login Figma | Templune</title>
      </head>
      <body class="bg-dark">
          <section>
            <div class="row g-0">
                <div class="col-lg-7 d-none d-lg-block">
                    <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
                        <ol class="carousel-indicators">
                          <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
                          <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
                        </ol>
                        <div class="carousel-inner">
                          <div class="carousel-item img-1 min-vh-100 active">
                            <div class="carousel-caption d-none d-md-block">
                              <h5 class="font-weight-bold">La más potente del mercado</h5>
                              <a class="text-muted text-decoration-none">Visita nuestra tienda</a>
                            </div>
                          </div>
                          <div class="carousel-item img-2 min-vh-100">
                            <div class="carousel-caption d-none d-md-block">
                              <h5 class="font-weight-bold">Descubre la nueva generación</h5>
                              <a class="text-muted text-decoration-none">Visita nuestra tienda</a>
                            </div>
                          </div>
                        </div>
                        <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
                          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                          <span class="sr-only">Previous</span>
                        </a>
                        <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
                          <span class="carousel-control-next-icon" aria-hidden="true"></span>
                          <span class="sr-only">Next</span>
                        </a>
                      </div>
                </div>
                <div class="col-lg-5 bg-dark d-flex flex-column align-items-end min-vh-100">
                    <div class="px-lg-5 pt-lg-4 pb-lg-3 p-4 mb-auto w-100">
                        <img src="images/Logo.svg" class="img-fluid" />
                    </div>
    
                    <div class="align-self-center w-100 px-lg-5 py-lg-4 p-4">
                    <!--<h1 class="font-weight-bold mb-4">Bienvenido de vuelta</h1>-->
                    <form class="mb-5">
                        <div class="mb-4">
                         
                          <input type="email" class="form-control bg-dark-x border-0" id="idCorreo" placeholder="Ingresa tu email" aria-describedby="emailHelp">
                        </div>
                        <div class="mb-4">
                        
                          <input type="password" class="form-control bg-dark-x border-0 mb-2" placeholder="Ingresa tu contraseña" id="idclave">
                          <a href="" id="emailHelp" class="form-text text-muted text-decoration-none">¿Has olvidado tu contraseña?</a>
                        </div>
                        <button type="button" class="btn btn-primary w-100" id="correo" onclick="registrarr();" >Iniciar sesión</button>
                       
                      </form>
    
          
                    <div class="d-flex justify-content-around">
                        <button type="button" class="btn btn-outline-light flex-grow-1 mr-2"><i class="fa fa-google lead mr-2"></i>Google </button>
                        <button type="button" class="btn btn-outline-light flex-grow-1 ml-2"><i class="fa fa-handshake-o lead mr-2"></i> Registrarse</button>
                    </div>
                    </div>
                  
                </div>
            </div>
          </section>
        <!-- Optional JavaScript -->
        <script src="popper/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>
    
        <script src="plugins/sweetAlert2/sweetalert2.all.min.js"></script>
         <script src="js/login.js"></script>
        
        
      </body>
    </html>

    este es mi interfaz de un login pero cuando quiero mandar un  Sweet Alert 2 para la validacion de campos no me manda o no responde 

    me sale lo siguiente;

    login.js:4 Uncaught ReferenceError: $ is not defined
        at registrarr (login.js:4)
        at HTMLButtonElement.onclick (index.php:67)


    y este es el JS:

    function registrarr(){


    if( $('#idCorreo').val()==""  || $('#idclave').val()=="" ) {

    swal({
    type:'warning',
    title:'alert',
    text:'Un campo esta vacio, asegúrese de llenar los campos'

    });

    }else{

    }



    }

    por favor ayuden soy nuevo con ello  y trabajo con funciones pero me sale ese error por que ? 

    domingo, 1 de noviembre de 2020 2:44

Todas las respuestas

  • Hola yato4503p,

    Aquí puedes encontrar varios ejemplos de como utilizar Sweet Alert 2. Acá hay un ejemplo de login que podrías probar. Podrías fijarte si este es el problema: No se admiten varias entradas, puede lograrlas utilizando html y parámetros preConfirm. Dentro de la función preConfirm () puede pasar el resultado personalizado a la función resolve () como parámetro:

    swal({
    
      title: 'Multiple inputs',
    
      html:
    
        '<input id="swal-input1">' +
    
        '<input id="swal-input2">',
    
      preConfirm: function () {
    
        return new Promise(function (resolve) {
    
          resolve([
    
            $('#swal-input1').val(),
    
            $('#swal-input2').val()
    
          ])
    
        })
    
      },
    
      onOpen: function () {
    
        $('#swal-input1').focus()
    
      }
    
    }).then(function (result) {
    
      swal(JSON.stringify(result))
    
    }).catch(swal.noop)

    ¿Estás seguro de que el problema viene de sweet alert? ¿Ya lo has probado sin sweet alert para ver si el problema es algo más? Espero que te sea de ayuda. Por favor no olvides marcar una respuesta si resolviste tu consulta (debajo de cada post hay una opción que dice “Marcar como Respuesta”). Quedo pendiente de cualquier actualización. Gracias por levantar tu consulta en los foros de msdn.

     

    Saludos cordiales

    Gabriel Castro

     ____________________________ 

    Por favor recuerde "Marcar como respuesta" las respuestas que hayan resuelto su problema, es una forma común de reconocer a aquellos que han ayudado, y hace que sea más fácil para los otros visitantes encontrar la solución más tarde. 

    lunes, 2 de noviembre de 2020 13:25