Verify password with JS and stay in the form

Question

Verify password with JS and stay in the form

Navigation

#1 by (0 votes)

0

I'm doing a login for a project that needs design in css and js. The problem is that I have a code but it does not work, I would like you to help me with the following:

<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>

The first problem is that I need to validate the passwords with js and apparently the js is not working for me.

Once the above has been solved, I need you to keep me in the form registration and that is not changed when logging in.

javascript jquery login

asked by callo33 05.07.2017 в 06:09

source

1 answer

Overlap entry and exit records array with data from an sql query

score 0 · Answer 1

Let's see, you had a lot of programming errors in JavaScript, you picked up the values of the input fields incorrectly, the onsubmit part did not work (I changed it by jQuery code in the JS below).

To keep it in the form when there is an error you have to use the e.preventDefault() as you can see in the code.

I have also commented on some document.register that I do not know what they were for, I guess what code to finish.

Same as the submit when the keys are correct, as you can see I have commented since if the validation function returns true and does not make the e.preventDefault() let the form be sent to the action indicated on the <form> tag %

<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>