1

quiero utilizar las validaciones de html (required, pattern,...) pero siempre me recarga la pagina al dar click en submit. ¿Que estoy haciendo mal ? Intenté utilizar el event.preventDefault() pero no supe bien donde ponerlo. Este es el código de html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Inicio de Sesión</title>

        <link rel="stylesheet" type="text/css" href="librerias/bootstrap/css/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="librerias/alertifyjs/css/alertify.css">
        <link rel="stylesheet" type="text/css" href="librerias/alertifyjs/css/themes/default.css">
        <link href='https://fonts.googleapis.com/css?family=Raleway:400,300' rel='stylesheet' type='text/css'><!--fuente de raleway para documento-->
        <link rel="shortcut icon" type="image/x-icon" href="img/triibu.ico"><!--Mentemos el icono de tribu para la pestaña-->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"><!--link para iconos font awesome-->
        <link rel="stylesheet" type="text/css" href="librerias/bootstrap/css/bootstrap.min.css">

        <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><!--libreria query-->
        <script src="librerias/bootstrap/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="css/estilos1.css"><!--llamamos a los estilos css-->

</head>

<body>
    <div class="contenedor">

        <div class="cabeza">
            <a href="index.php"><img src="img/triibu.png" width="80"></a>   
            <h1 class="titulo" >Inicio de Sesión</h1>       

        </div>

        <hr class="border"><!linea antes del texto>

        <form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="POST" class="formulario" name="login">

            <div class="form-group"><!subgrupo para correo>
                <input type="email" name="email" class="correo" placeholder="E-Mail" required>
            </div>

            <div class="form-group"><!subgrupo contraseña>
                <input type="password" name="password" class="password" placeholder="Password" required>
            </div>

            <p><a type="submit" class= "btn btn-primary btn-lg" role="button" onclick="login.submit();">Iniciar Sesión</a></p>

            <?php if(!empty($errores)): ?>
                <div class="error">
                <ul>
                    <?php echo $errores; ?>
                </ul>
                </div>
            <?php endif; ?>

        </form>

        <div class="bottom">
            <div class="login">
                <a class="login" href="registrate.php">Crear una cuenta</a>
            </div>
            <div class="inicio">
                <a class="inicio" href="Recupera_Pass.php">¿Olvidaste tu contraseña</a>
            </div>

        </div>

    </div>
</body>
</html>

Básicamente, quiero que salgan los mensajes de error de html (como en la imagen) antes de que se envíe el formulario

introducir la descripción de la imagen aquí

6
  • Deberías poner el código HTML generado y no el PHP que lo genera para que se vea el problema en la propia pregunta(creando así un ejemplo mínimo verificable). Si necesitas ayuda con eso, lee Cómo preguntar o pregunta por aquí y te ayudamos.
    – Alvaro Montoro
    el 8 mar. 2018 a las 2:40
  • la funcion onclick="login.submit();" hace algun tipo de logica? ahi esta el problema. el 8 mar. 2018 a las 2:46
  • @AlvaroMontoro soy nuevo en esto, no entiendo a que te refieres con código html generado y la función onclick="login.submit()" fue la forma en que me enseñaron a enviar los datos de un formulario, si le quito esa función no hace nada el botón de submit el 8 mar. 2018 a las 3:42
  • 1
    @AntonioMéndez el código que compartes es PHP, que se ejecuta en el servidor para generar HTML que el navegador muestra en el lado del usuario. El problema es que el error que recibes es en el lado del usuario (HTML), por eso sería mejor que compartieras el código que el navegador muestra (dándole a ver código fuente en el navegador). De ese modo, podremos reproducir el problema y ayudarte a solucionarlo.
    – Alvaro Montoro
    el 8 mar. 2018 a las 4:02
  • 1
    Para que valide automáticamente, hay que usar un input submit... Hay que reemplazar "iniciar sesión" por <input type="submit" class="btn btn-primary btn-lg" value="Iniciar Sesión">
    – Mariano
    el 8 mar. 2018 a las 7:12

1 respuesta 1

1

Como indica mariano,

Para que valide automáticamente, hay que usar un input submit... Hay que reemplazar "iniciar sesión" por <input type="submit" class="btn btn-primary btn-lg" value="Iniciar Sesión">

Debes cambiar :

<a type="submit" class= "btn btn-primary btn-lg" role="button" onclick="login.submit();">Iniciar Sesión</a>

Por :

<input type="submit" class="btn btn-primary btn-lg" value="Iniciar Sesión">

Ya que la etiqueta no acepta el valor type, ademas de que al dar click esta ejecutando una función evitando que el formulario se valide con el submit

1
  • 1
    Gracias, me funcionó perfecto el 9 mar. 2018 a las 22:20

Tu Respuesta

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

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