1

He estado tratando de hacer una simple validación con un javascript y un jsp para un formulario básico:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Registrate</title>
<meta charset="utf-8">
<meta name="viewport"
    content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet"
    href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="css/login.css" rel="stylesheet">
<title>Bobby Fisher Institute</title>
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/style.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>window.jQuery || document.write('<script src="js/jquery-1.11.2.min.js"><\/script>')</script>
    <script src="js/modernizr.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/main.js"></script>
    <script src="js/header2.js"></script>
    <script src="js/valida.js"></script>

</head>
<body>
    <jsp:include page="../portal/header.jsp" /> 

        <div class="container login-container">
        <br /> <br />
        <div class="row">
            <div class="col-md-3"></div>
            <div class="col-md-6 login-form-1">
                <h3>Ingresar al Sistema</h3>
                <br/>
                <form action="" method="get" onsubmit="return validar();">
                    <div class="form-group">
                        <input type="text" class="form-control" id="name"
                            placeholder="Nombre de usuario" value="" required />
                    </div>
                    <div class="form-group">
                        <input type="email" class="form-control" id="email"
                            placeholder="Tu correo" value="" required />
                    </div>
                    <div class="form-group">
                        <input type="password" class="form-control" id="pass"
                            placeholder="Contraseña" value="" required />
                    </div>
                    <select class="form-group" name="programa" id="programa" >

                    <option value="10" selected>Estudiante</option>
                    <option value="20" >Profesor</option>
                    <option value="30">Administrativo</option>


                </select >
                    <div class="form-group">
                        <input type="submit" class="btnSubmit" />
                    </div>
                    <div class="form-group">
                        <a href="#" class="ForgetPwd">No tiene una cuenta?</a>
                    </div>
                </form>
            </div>
            <div class="col-md-3"></div>
        </div>
    </div>

El script le hago referencia de últimas antes del body, y luego en ONSUBMIT llamo la función como está en el javascript:

function validar(){
    var nombre, correo, contraseña;
    nombre = document.getElementById("name").value;
    correo = documento.getElementById("email").value;
    contraseña = documento.getElementById("pass").value;
    expresion = /\w+@\w+\.[a-z]/;
    if(nombre === "" || correo === "" || contraseña === "" ){
        alert("Todos los campos deben ser rellenados.");
        return false;
    }
    else if(nombre.lenght>30){
        alert("El nombre es muy largo.");
        return false;
    }
    else if(correo.lenght>30){
        alert("El correo es muy largo.");
        return false;
    }
    else if(contraseña.lenght>30 || contraseña<7){
        alert("La contraseña debe tener entre 8 y 29 caracteres.");
        return false;
    }
    else if (expresion.test(correo)){
        alert("El correo no es válido.");
        return false;
    }


}

Aún no he pasado al lío que será agregarlo a la base de datos. Estoy usando el método get porque por algún motivo sale que el formato HTTP POST no es soportado, y uso get y simplemente omite todo, solamente lee el campo de tipo de usuario, cuando corro estos archivos en el servidor simplemente se recarga la página (porque no tiene un action="). No sé si será algo con bootstrap o qué sucede. Espero ser claro y que puedan brindarme ayuda. Gracias. Pongo una imagen de las carpetas para que vean como están dispuestas por si eso ayuda en algo: introducir la descripción de la imagen aquí

1 respuesta 1

1

Para validar un formulario con Javascript al realizar el evento onsubmit debe recordar que esto hace que se ejecute el método POST o GET osea seras redireccionado a otra pagina, el método validar() se ejecuta pero inmediatamente el navegador te dirigirá al action si el atributo action esta vació hará referencia a la raíz actual de la pagina, para evitar el re-direccionamiento debes ejecutar el event.preventDefault() y opcionalmente puedes agregar el event.stopPropagation() para evitar que otro método javascript en el padre del formulario sea ejecutado.

El código seria algo como esto.

  function validar(){
    event.preventDefault()
    event.stopPropagation()
    console.log('validar')
  }
  
  function enviar(){
    console.log('redirecciono')
    // esto hace que se ejecute
    // y de inmediato se regarga la pagina
  }
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <form action="" method="get" onsubmit="validar()">
    <input type="submit" class="btnSubmit" value="VALIDAR" />
  </form>
  
   <form action="" method="get" onsubmit="enviar()">
    <input type="submit" class="btnSubmit" value="REDIRECCIONAR" />
  </form>
  
</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.