Hola a todos soy algo nuevo en la progamacion web tengo un inconveniente con mi codigo ya que no valida nada de el formulario y redirige directamente a la otra pagina , he buscado varias soluciones y videos pero no he dado con la respuesta concreta a la solucion, adjunto el codigo en html y javascript. tambien tengo la duda si esta bien hacer el return con un onsubmit en el formulario, o puedo crear directamente el evento con un onclick dentro del input de registro
function validar() {
var nombre, apeliidos, correo, usuario, clave, telefono, expresion;
nombre = document.getElementById("Nombre").value;
apeliidos = document.getElementById("Apellidos").value;
correo = document.getElementById("Correo").value;
usuario = document.getElementById("Usuario").value;
clave = document.getElementById("Clave").value;
telefono = document.getElementById("Telefono").value;
expresion = /\w+@\w+\.+[a-z]/;
if(nombre == "" || apeliidos == "" || correo == "" || usuario == "" || clave == "" || telefono === "") {
alert("Todos los campos son obligatorios");
return false;
}
if(nombre.length>30) {
alert("El nombre es muy largo");
return false;
}
if(apeliidos.length>80) {
alert("Los apellidos son muy largos ");
return false;
}
if(correo.length>100) {
alert("El correo es muy largo");
return false;
}
if(!expresion.test(correo)){
alert("el correo no es valido ");
return false;
}
if(usuario.length>80 || clave.length>20) {
alert("El usuario y la clave solo deben tener 20 caracteres como maximo");
return false;
}
if(telefono.length>10) {
alert("El telefono es muy largo");
return false;
}
if(isNaN(telefono)) {
alert("el telefono ingresado no es un número ");
return false;
}
}
<form action="registrar.php" id="formulario" method="post" class="form-register" onsubmit="return validar()">
<h2 style="font-family: 'Pacifico', cursive;" class="form__titulo">Crear cuenta</h2>
<div class="contenedor-inputs">
<input type="text"id="Nombre" name="nombre" placeholder="Nombre" class="input-48" required>
<input type="text"id="Apellidos" name="apellidos" placeholder="Apellidos" class="input-48" required>
<input type="email"id="Correo" name="correo" placeholder="Correo" class="input-100" required>
<input type="text"id="Usuario" name="usuario" placeholder="Usuario" class="input-48" required>
<input type="password"id="Clave" name="clave" placeholder="Contraseña" class="input-48" required>
<input type="text"id="Telefono" name="telefono" placeholder="Telefono" class="input-100" required >
<input type="submit" value="Registrar" class="btn-enviar">
<p class="form__link">¿Ya tienes una cuenta?<a href="#">Ingresa aquí</a></p>
</div>
</form>
<script src="validar.js"></script>
</body>
</html>