Buenas a tod@s de nuevo,
Esta vez tengo que hacer un formulario con una serie de mensajes de error cuando no se cumplen una serie de criterios de usuario y contraseña. El problema es que no sale nada por pantalla y creo que es debido a que en el atributo action de la etiqueta form no tiene una URL indicada como valor. Sin embargo, por lo que he visto en ejemplos y de acuerdo a la teoría, en principio se evalúan las condiciones indicadas antes de que se envíen los datos recogidos del formulario, por lo que la URL no sería necesaria.
Por ello y como no veo una solución posible al problema, pido vuestra ayuda, por si veis algún problema con el código. Adjunto tanto el html como el script por si acaso.
Muchas gracias por adelantado
P.D.1: He corregido algún error que había en los nombres de algunas variables
function validar() {
var okUsuario = validarUsuario();
var okContrasena = validarContrasena();
if (okUsuario && okContrasena) {
return true;
}
return false;
}
function validarUsuario() {
var ok;
var msgError = '';
var usuario = document.getElementById('usuario').value;
var f1 = document.getElementById('f1');
var entrada = document.getElementsByClassName('entrada')[0];
f1.style.border = '';
error.innerHTML = '';
if (usuario.length == 0) {
ok = false;
msgError = 'Este campo no puede estar vacío';
} else if (!(/^[a-z]+$/.test(usuario))) {
ok = false;
msgError = 'Este campo sólo admite texto compuesto exclusivamente por letras minúsculas';
} else if ((usuario.length < 3) || (usuario.length >= 12)) {
ok = false;
msgError = 'Este campo sólo puede tener una longitud entre 3 y 12 caracteres';
}
if (!ok) {
f1.style.border = '2px solid red';
entrada.innerHTML = msgError;
return false;
}
return true;
}
function validarContrasena() {
var ok;
var msgError = '';
var contrasena = document.getElementById('contrasena').value;
var f2 = document.getElementById('f2');
var entrada = document.getElementsByClassName('entrada')[1];
f2.style.border = '';
error.innerHTML = '';
if (contrasena.length == 0) {
ok = false;
msgError = 'Este campo no puede estar vacío';
} else if (!(/^[A-Z]{1}[.,-]{1}[a-z0-9]{6}$/.test(contrasena))) {
ok = false;
msgError = 'Este campo sólo admite texto compuesto exclusivamente por 6 letras minúsculas y/o números';
}
if (!ok) {
f2.style.border = '2px solid red';
entrada.innerHTML = msgError;
return false;
}
return true;
}
<body>
<div class="caja">
<h1>Validar Formulario</h1>
</div>
<hr />
<div class="caja">
<h2>Datos de identificación</h2>
</div>
<div class="caja">
<fieldset>
<form action="" method="post" onsubmit="return validar ()">
<div class="formulario" id="f1">
<label class="entrada">Usuario</label>
<input type="text" name="user" id="usuario">
</div>
<br />
<div class="formulario" id="f2">
<label class="entrada">Contraseña</label>
<input type="password" name="password" id="contrasena">
</div>
<br />
<div id="boton">
<input type="submit" name="enviar" value="Enviar">
</div>
</form>
</fieldset>
</div>
<hr />
</body>
Check Javascript Syntax
para ver los errores. De sintaxis me muestra uno, pero de lógica me parece ver mas pues usas la variableusuario
dentro de esa función sin haberlo definido antes me parece.