0

El problema realmente no sé de dónde proviene, y es bastante simple, pero no sé como solucionarlo, el tema es que tengo un formulario que es para poder ingresar a X sitio como un usuario, entonces tiene su respectivo campo de usuario y contraseña el tema es super simple, si el usuario esta vacío debe saltar el modal para que le indique al usuario que tiene un campo vacío y lo debe rellenar, el tema es que cuando recargo y pruebo el script, al primer intento no funciona, pero al segundo intento y todos los que le precedan si funciona y no sé porque pasa

Código de JS

window.addEventListener('load', () => {
    var form = document.getElementById("form");
    var user = document.getElementById("user").value;
    var pass = document.getElementById("pass").value;
    
    form.addEventListener('submit', () => {
        alert("Tomo los datos" + form);
        if (user == "") {
            $('#view_error').modal('show');
        } else {
            $('#view_loged').modal('show');
            //alert("logeado");
        }
    });
});


Código de HTML
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display modal</title>
    <script src="js/modal.js"></script>
    <link rel="stylesheet" href="css/Login-Form-Dark.css">
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="css/sett.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
</head>

<body>
    <!-- Inicio modal Error -->
    <div class="modal fade" id="view_error" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalCenterTitle">Error al inciar sesión</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                </div>
            </div>
        </div>
    </div>
    <!-- Cierre Modal Error -->
    <div class="login-dark">
        <form action="#" id="form">
            <h2 class="sr-only">Login Form</h2>
            <div class="illustration"><i class="icon ion-ios-locked-outline"></i></div>
            <div class="form-group"><input class="form-control" type="text" name="user" id="user" placeholder="Usuario"></div>
            <div class="form-group"><input class="form-control" type="password" name="pass" id="pass" placeholder="Contraseña"></div>
            <div class="form-group"><button class="btn btn-primary btn-block" type="submit" data-toggle="modal" data-target="#view_error">Log In</button></div><a href="#" class="forgot">Forgot your email or password?</a>
        </form>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
</body>

</html>
Espero me puedan ayudar, yo por mi parte seguiré buscando, saludos y que tengan una buena mañana

1
  • Has probado añadiendo el atributo required dentro de los input nombre y contraseña? Commented el 10 oct. 2018 a las 12:46

2 respuestas 2

1

Agarre tu código y lo puse a funcionar como tu lo necesitas, el único cambio que debes hacer es decirle al evento submit que prevenga que haga lo que siempre hace por defecto lo cual es enviar el formulario y refrescar la página, para ello al evento submit le pasas el parámetros el cual obtiene el todas las características del evento en si en este caso e y luego le dices que prevenga su comportamiento con la función preventDefault(), quedando como e.preventDefault();, así:

window.addEventListener('load', () => {
    var form = document.getElementById("form");
    var user = document.getElementById("user").value;
    var pass = document.getElementById("pass").value;
    
    form.addEventListener('submit', (e) => {
    
      e.preventDefault();
      alert("Tomo los datos" + form);
      if (user == "") {
        $('#view_error').modal('show');
      } else {
        $('#view_loged').modal('show');
      }
      
    });
});
.container{
  margin:10px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<!-- Inicio modal Error -->
<div class="modal fade" id="view_error" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">Error al inciar sesión</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
       Error
      </div>
      <div class="modal-footer"></div>
    </div>
  </div>
</div>
<!-- Cierre Modal Error -->

<div class="container">
  <div class="login-dark">
    <form action="#" id="form">
      <h2 class="sr-only">Login Form</h2>
      <div class="illustration">
        <i class="icon ion-ios-locked-outline"></i>
      </div>
      <div class="form-group">
        <input class="form-control" type="text" name="user" id="user" placeholder="Usuario">
      </div>
      <div class="form-group">
        <input class="form-control" type="password" name="pass" id="pass" placeholder="Contraseña">
      </div>
      <div class="form-group">
        <button class="btn btn-primary btn-block" type="submit" data-toggle="modal" data-target="#view_error">Log In</button>
      </div>
      <a href="#" class="forgot">Forgot your email or password?</a>
    </form>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

0

Buen día, ¿No has intentado usar la validación nativa de html5 para los campos vacíos? Te lo comento porque en el código que pusiste, al momento de dar clic al botón, me intenta mostrar el modal pero me recarga la página, en todo caso, puedes recoger el evento submit del form para evitar la recarga de la pagina.

Prueba lo siguiente:

$("#form").submit(function(e){
       //aqui pones el código para validar los campos vacíos
    
    //esto te sirve para, de cierta manera, cancelar el envío de datos del form al action que especificaste.
       e.preventDefault();
       return false;
    });

Espero solucione tu problema.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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