0

Estoy haciendo un login para un proyecto que necesita diseño en css y js. El problema es que tengo un código pero no funciona, quisiera que me ayudaran con lo siguiente:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/loginregister.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <title>JSP Page</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <div class="panel panel-login">
                    <div class="panel-heading">
                        <div class="row">
                            <div class="col-xs-6">
                                <a href="#" class="active" id="login-form-link">Iniciar Sesión</a>
                            </div>
                            <div class="col-xs-6">
                                <a href="#" id="register-form-link">Registrar</a>
                            </div>
                        </div>
                        <hr>
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-lg-12">
                                <form id="login-form" action="MenuServlet" method="post" role="form" style="display: block;">
                                    <div class="form-group">
                                        <input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Usuario" value="">
                                    </div>
                                    <div class="form-group">
                                        <input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Contraseña">
                                    </div>
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-sm-6 col-sm-offset-3">
                                                <input type="submit" name="btninicio" id="login-submit" tabindex="4" class="form-control btn btn-login" value="Ingresar">
                                            </div>
                                        </div>
                                    </div>
                                </form>
                                <form name="registro" id="register-form" action="LoginServlet" method="post" role="form" style="display: none;" onSubmit="return validar_clave()">
                                    <div class="form-group">
                                        <input type="text" name="usernamereg" id="username" tabindex="1" class="form-control" placeholder="Usuario" value="">
                                    </div>
                                    <div class="form-group">
                                        <input type="text" name="namereg" id="username" tabindex="1" class="form-control" placeholder="Nombre" value="">
                                    </div>
                                    <div class="form-group">
                                        <input type="text" name="lastnamereg" id="username" tabindex="1" class="form-control" placeholder="Apellido" value="">
                                    </div>
                                    <div class="form-group">
                                        <input type="password" name="passwordreg" id="password" tabindex="2" class="form-control" placeholder="Contraseña">
                                    </div>
                                    <div class="form-group">
                                        <input type="password" name="confirm-passwordreg" id="confirm-password" tabindex="2" class="form-control" placeholder="Confirmar Contraseña">
                                    </div>
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-sm-6 col-sm-offset-3">
                                                <input type="submit" name="btninicio" id="register-submit" tabindex="4" class="form-control btn btn-register" value="Registrar">
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
    function validar_clave() {
        var caract_invalido = " ";
        var caract_longitud = 40;
        var cla1 = document.registro.passwordreg.value;
        var cla2 = document.registro.confirm-passwordreg.value;
        if (cla1 == '' || cla2 == '') {
            alert('Debes introducir tu clave en los dos campos.');
            document.registro
            return false;
        }   
        if (document.registro.passwordreg.value.length < caract_longitud) {
            alert('Tu clave debe constar de ' + caract_longitud + ' caracteres.');
            document.registro
            return false;
        }
        if (document.registro.passwordreg.value.indexOf(caract_invalido) > -1) {
            alert("Las claves no pueden contener espacios");
            document.registro
            return false;
        }
        else {
            if (cla1 != cla2) {
                alert ("Las claves introducidas no son iguales");
                document.registro
                return false;
            }
            else {
                alert('Contraeña correcta');
                document.registro.submit;
                return true;
            }
        }
    }
    </script>

    <script type="text/javascript">
    $(function () {

        $('#login-form-link').click(function (e) {
        $("#login-form").delay(100).fadeIn(100);
        $("#register-form").fadeOut(100);
        $('#register-form-link').removeClass('active');
        $(this).addClass('active');
        e.preventDefault();
        });
        $('#register-form-link').click(function (e) {
        $("#register-form").delay(100).fadeIn(100);
        $("#login-form").fadeOut(100);
        $('#login-form-link').removeClass('active');
        $(this).addClass('active');
        e.preventDefault();
        });

    });

    </script>
</body>
</html>

  1. El primer problema es que necesito validar las contraseñas con js y al parecer el js no me esta funcionando.

  2. Una vez solucionado lo anterior necesito que me mantenga en el form de registro y que no se cambie al de iniciar sesion.

2
  • ¿Que valen cla1 y cla2 en la funcion?
    – Lithorell
    Commented el 5 jul. 2017 a las 5:46
  • 1
    Deberías usar Ajax Commented el 31 ago. 2018 a las 22:16

1 respuesta 1

2

Veamos, tenías bastantes errores de programación en el JavaScript, recogías mal los valores de los campos input, la parte del onsubmit no funcionaba (la he cambiado por código jQuery en el JS abajo del todo).

Para que se mantenga en el form cuando hay algún error hay que utilizar el e.preventDefault() tal y como puedes ver en el código.

He comentado también algunos document.registro que no sé para que eran, imagino que código por acabar.

Igual que el submit cuando las claves son correctas, que como puedes ver lo he comentado ya que si la función de validación devuelve true y no hace el e.preventDefault() deja que el formulario se envíe al action indicado en la etiqueta <form>

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/loginregister.css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <title>JSP Page</title>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-md-offset-3">
        <div class="panel panel-login">
          <div class="panel-heading">
            <div class="row">
              <div class="col-xs-6">
                <a href="#" class="active" id="login-form-link">Iniciar Sesión</a>
              </div>
              <div class="col-xs-6">
                <a href="#" id="register-form-link">Registrar</a>
              </div>
            </div>
            <hr>
          </div>
          <div class="panel-body">
            <div class="row">
              <div class="col-lg-12">
                <form id="login-form" action="MenuServlet" method="post" role="form" style="display: block;">
                  <div class="form-group">
                    <input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Usuario" value="">
                  </div>
                  <div class="form-group">
                    <input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Contraseña">
                  </div>
                  <div class="form-group">
                    <div class="row">
                      <div class="col-sm-6 col-sm-offset-3">
                        <input type="submit" name="btninicio" id="login-submit" tabindex="4" class="form-control btn btn-login" value="Ingresar">
                      </div>
                    </div>
                  </div>
                </form>
                <form name="registro" id="register-form" action="LoginServlet" method="post" role="form" style="display: none;">
                  <div class="form-group">
                    <input type="text" name="usernamereg" id="username" tabindex="1" class="form-control" placeholder="Usuario" value="">
                  </div>
                  <div class="form-group">
                    <input type="text" name="namereg" id="username" tabindex="1" class="form-control" placeholder="Nombre" value="">
                  </div>
                  <div class="form-group">
                    <input type="text" name="lastnamereg" id="username" tabindex="1" class="form-control" placeholder="Apellido" value="">
                  </div>
                  <div class="form-group">
                    <input type="password" name="passwordreg" id="password" tabindex="2" class="form-control" placeholder="Contraseña">
                  </div>
                  <div class="form-group">
                    <input type="password" name="confirm-passwordreg" id="confirm-password" tabindex="2" class="form-control" placeholder="Confirmar Contraseña">
                  </div>
                  <div class="form-group">
                    <div class="row">
                      <div class="col-sm-6 col-sm-offset-3">
                        <input type="submit" name="btninicio" id="register-submit" tabindex="4" class="form-control btn btn-register" value="Registrar">
                      </div>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


  <script type="text/javascript">
    function validar_clave(e) {

      var caract_invalido = " ";
      var caract_longitud = 6;
      var cla1 = $('#register-form #password').val();
      var cla2 = $('#register-form #confirm-password').val();
      if (cla1 == '' || cla2 == '') {
        alert('Debes introducir tu clave en los dos campos.');
        //document.registro
        e.preventDefault();
        return false;
      }
      if (cla1.length < caract_longitud) {
        alert('Tu clave debe constar de ' + caract_longitud + ' carácteres.');
        //document.registro
        e.preventDefault();
        return false;
      }
      if (cla1.indexOf(caract_invalido) > -1) {
        alert("Las claves no pueden contener espacios");
        //document.registro
        e.preventDefault();
        return false;
      } else {
        if (cla1 != cla2) {
          alert("Las claves introducidas no son iguales");
          //document.registro
          e.preventDefault();
          return false;
        } else {
          alert('Contraseña correcta');
          //$('#register-form').trigger('submit');
          return true;
        }
      }
    }

    $(function() {

      $('#login-form-link').click(function(e) {
        $("#login-form").delay(100).fadeIn(100);
        $("#register-form").fadeOut(100);
        $('#register-form-link').removeClass('active');
        $(this).addClass('active');
        e.preventDefault();
      });
      $('#register-form-link').click(function(e) {
        $("#register-form").delay(100).fadeIn(100);
        $("#login-form").fadeOut(100);
        $('#login-form-link').removeClass('active');
        $(this).addClass('active');
        e.preventDefault();
      });

      $('#register-form').submit(function(e) {
        validar_clave(e);
      });
    });
  </script>
</body>

</html>

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.