me han encargado una tarea, pero el problema es que no consigo que valide el formulario. Os pongo más abajo una foto con los requisitos que me piden.
Cualquier tipo de ayuda se agradece.
Un saludo y gracias.
Requisitos:
Nombre( máximo 15 caracteres)
Apellidos ( máximo 30 caracteres)
Correo valido
Fecha valida de nacimiento y con mayoría de edad
Ciudad ( máximo 15 caracteres)
Código postal numérico y valido
País (desplegable con listado)
Nombre de usuario ( máximo 15 y sin caracteres espaciales)
Clave ( 8 caracteres con al menos una mayúscula, número, letra y carácter especial)
Condiciones de registro
Deberá ponerse la casilla en rojo cuando es erróneo y mostrar ventana o mensaje de error y en amarillo cuando se pasa el cursor y se selecciona la casilla.
//Aqui va la funcion creaCuenta() con las verificaciones y demás.
function creaCuenta() {
//Verificar nombre y apellido
nombre = document.getElementById("nombre").value;
apellido = document.getElementById("apellidos").value;
correo = document.getElementById("correoE").value;
fechaNac = document.getElementById("nacimiento").value;
ciudad = document.getElementById("ciudad").value;
user = document.getElementById("usuario").value;
//Comparamos nombre y apellido si están vacíos
if (nombre == "") {
alert("El campo nombre no se puede quedar vacío.");
nombre.style.background = "red";
}
if (apellido == "") {
alert("El campo apellido no se puede quedar vacío.");
nombre.style.background = "red";
}
//Comprobar correo
if (correo == "") {
alert("El correo no se puede quedar vacío.");
}
//Verificar si es mayor de edad
var fecha = document.getElementById("nacimiento");
var edad = calcularEdad(fecha);
if (edad < 18) {
alert("No puedes seguir el proceso");
}
//funcion para calcular la edad
function calcularEdad(fecha) {
var hoy = new Date();
var cumpleaños = new Date(fecha);
var edad = hoy.getFullYear() - cumpleaños.getFullYear();
var mes = hoy.getMonth() - cumpleaños.getMonth();
//Comprobacion
if (mes < 0 || mes == 0 & hoy.getDate() < cumpleaños.getDate()) {
edad--;
}
return edad;
}
//Comprobar ciudad
if (ciudad == "") {
alert("Tienes que rellenar la ciudad");
}
//comprobar usuario
if(user == "") {
alert("Tienes que poner un usuario.");
}
}
//Accion al cargar la pagina
window.onload = function() {
document.getElementById("Enviar").onclick = creaCuenta;
}
/*
//Evento Invalid: Se desencadena cada vez que un formulario falla en la validación
document.formulario.addEventListener("invalid", validarTiempoReal, true);
function validar(errorFormulario) {
//Pondrá en rojo el elemento que falle
var elemento = errorFormulario.target;
elemento.style.background = "red";
}
*/
/* Estilo para que el texto se alinee al centro */
h1, h3 {
text-align: center
}
#Enviar {
font-size: 30px;
margin-left: 45%;
margin-top: 2%
}
<!-- Creamos el título principal -->
<h1>ESPANA FASCINANTE</h1>
<!-- Otro subtitulo -->
<h3>Formulario de registro</h3>
<!-- Creacion del Formulario -->
<form name="formulario" id="formulario"
autocomplete="off" action="" method="GET">
<!-- Datos basicos -->
<fieldset>
<legend><strong>QUIEN ERES</strong></legend>
<!-- Campo de texto para nombre con maximo 15 caracteres -->
<p><label for="nombre"><strong>Nombre:<br/> </strong> </label>
<input type="text" name="nombre" id="nombre" maxlength="15" required></p>
<!-- Campo de texto apellidos con maximo 30 caracteres -->
<p><label for="apellidos"><strong>Apellidos:<br/> </strong> </label>
<input type="text" name="apellidos" id="apellidos" maxlength="30" required></p>
<!-- Campo con email con autovalidacion -->
<p><label for="correoE"><strong>Correo electrónico:<br/> </strong></label>
<input type="email" name="correoE" id="correoE" required></p>
<!-- Campo para introducir fecha de nacimiento-->
<p><label for="date"><strong>Fecha de nacimiento:<br/> </strong></label>
<input type="date" name="nacimiento" id="nacimiento" required></p>
</fieldset></br>
<!-- Informacion geográfica -->
<fieldset>
<legend><strong>DE DONDE ERES</strong></legend>
<!-- Campo de texto para ciudad con maximo 15 caracteres -->
<p><label for="ciudad"><strong>Ciudad:<br/> </strong> </label>
<input type="text" name="ciudad" id="ciudad" maxlength="15" required></p>
<!-- Campo para codigo postal que solo sea numero -->
<p><label for="codigoPostal"><strong>Codigo Postal:<br/> </strong></label>
<input pattern="[0-9]{5}" name="codigoPostal" id="codigoPostal"
placeholder="Introduce 5 digitos" required></p>
<!-- Lista desplegable para buscar el pais -->
<datalist id="pais" >
<option value="España" id="pais1" ></option>
<option value="Alemania" id="pais2"></option>
<option value="Francia" id="pais3"></option>
<option value="Italia" id="pais4"></option>
<option value="Portugal" id="pais5"></option>
</datalist>
<!-- Definicion del campo Pais -->
<p><label for="pais"><strong>País:<br/> </strong> </label>
<input type="text" name="pais" id="pais" list="pais" required></p>
</fieldset></br>
<!-- Datos de inicio de sesión -->
<fieldset>
<legend><strong>COMO QUIERES INICIAR SESION</strong></legend>
<!-- Campo de texto para usuario con maximo 15 caracteres -->
<p><label for="usuario"><strong>Usuario:<br/> </strong></label>
<input type="text" name="usuario" id="usuario" maxlength="15" required></p>
<!-- Campo de contraseña con minimo 8 caracteres +
requerimentos especiales (una mayúscula, número, letra y
carácter especial -- Expresiones regulares) -->
<p><label for="password"><strong>Clave:<br/> </strong></label>
<input type="password" name="pass" id="pass"
pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$"
required></p>
<!-- Revalidar la contraseña-->
<p><label for="passwordVer"><strong>Vuelve a escribir
la clave:<br/> </strong></label>
<input type="password" name="passv" id="passv"
pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$"
required></p>
</fieldset><br/>
<!-- Politica de uso + Privacidad -->
<fieldset>
<legend><strong>CONDICIONES DE REGISTRO</strong></legend>
<strong>Deseo recibir ofertas de ESPANA FASCINANTE</strong><br/><br/>
<!-- Checkbox para condiciones de registro -->
<span>
<input type="radio" name="opcionCheck" id="dia">Una vez al día
</span>
<span>
<input type="radio" name="opcionCheck" id="semana">
Una vez a la semana
</span>
<span>
<input type="radio" name="opcionCheck" id="mes">Una vez al mes
</span>
<br/><br/>
<span>
<input type="checkbox" name="acuerdo" id="acuerdo" required />
Acepto el acuerdo de servicios, la declaracion de privacidad
y el uso de cookies
</span>
</fieldset>
<!-- Botón de envío formulario -->
<input type="submit" id="Enviar" value="Registrar" />
</form>