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
<input type="submit" class="btn btn-primary btn-lg" value="Iniciar Sesión">