Yo construí un programa para validar un formulario de html en javascript, lo único que valida son las regex (del campo de nombre de usuario) y las demás condiciones no las lee. Además que solo lee el primer campo que es el nombre, y los demás campos los ignora, en este caso ¿que podría hacer? Intenté crear una función para cada campo, pero tampoco funcionó. Esto es lo que me sale en el navegador al mandar el formulario.
No sé si puedo copiar todo el codigo de javascript aquí, así que copiaré solo el primer fragmento:
HTML
<html>
<head>
<meta charset='utf-8'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width'>
<link rel='stylesheet' type='text/css' href='style.css'>
<script src='script.js' defer></script>
</head>
<body>
<div class="titulo">
<h2>Registrese al curso</h2>
</div>
<div class="contenedorprincipal">
<div class="contenedortexto">
<p>
Bienvenido al formulario de registro, gracias por elegir nuestra plataforma
de cursos, ¡mejore su aprendizaje hoy!
</p>
</div>
<div class="contenedorform">
<div class="direcciontexto">
<form action="" method="POST" onsubmit="return checkFormulario()" name="formularioregistro" id="formularioregistro">
<div class="Camponombre">
<label for="nombre" >Nombre:</label>
<input type="text" name="nombre" id="nombre">
</div>
<div class="Campoemail">
<label for="Email">Email:</label>
<input type="text" name="email" id="email">
</div>
<div class="Campocontraseña">
<label for="contraseña" >Contraseña:</label>
<input type="text" name="contraseña" id="contraseña">
</div>
<div class="Campocontraseñados">
<label for="contraseñados" >Repita su contraseña:</label>
<input type="text" name="contraseñados" id="contraseñados">
</div>
<div class="Camponumero">
<label for="numerotlf" class="Camponumero">Número telefonico:</label>
<input type="text" name="numerotlf" id="numerotlf">
</div>
<button type="submit" class="botonenviar" name="envio" id="envio">Enviar</button>
</form>
</div>
</div>
</div>
</body>
</html>
Javascript
const nombreUsuario = document.getElementById("nombre");
const emailUsuario = document.getElementById("email");
const contraseñaUsuario = document.getElementById("contraseña");
const contraseñaUsuarioDos = document.getElementById("contraseñados");
const telefonoUsuario = document.getElementById("numerotlf");
const formularioRegistro = document.getElementById("formularioregistro").addEventListener('submit', checkFormulario)
function checkFormulario() {
if(nombreUsuario === "" || nombreUsuario === null || nombreUsuario.lenght === 0) {
alert("Error: debe llenar este campo");
nombreUsuario.focus();
return false;
}
else if(nombreUsuario.lenght <= 3 || nombreUsuario.lenght >= 20) {
alert("Error: el nombre usuario debe tener entre 4 y 19 caracteres");
nombreUsuario.focus();
return false;
}
else if ( !(/^[0-9a-zA-Z]+$/.test(nombreUsuario)) ) {
alert("Error: solo debe introducir valores alfanumericos")
nombreUsuario.focus();
return false;
} //solo está validando este bloque de código, lo demás lo ignora
if(emailUsuario === "" || emailUsuario === null || emailUsuario.lenght === 0) {
alert("Error: debe llenar este campo");
emailUsuario.focus();
return false;
}
else if( !(/\S+@\S+\.\S+/.test(emailUsuario)) ) {
alert("Error: debe ingresar un correo valido");
emailUsuario.focus();
return false;
}
} return true
Esa era la función javascript que creé, espero se entienda bien.
return false;
se sale de la función y ya no hace nada más, quieres que valide todo y después marque error?alert
con el error y hagafocus()
en ese campo donde faltó ingresar los datos