Quiero validar todos los campos del formulario; nombre
, edad
, lista
(select), terms
(checkbox).
De tal forma que salte un alert y el formulario no se envie cuando el campo nombre
este vacio, no se haya escogido ningun option de la lista lista
, y cuando no esté marcado el checkbox terms
Con la edad lo he conseguido de tal forma que solo deja introducir edades entre 18 y 65 pero no salta error cuando el campo está vacio.
Lo necesito en Javascript puro.
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="libreria.js"></script>
<script type="text/javascript">
function validate(){
var edad = document.getElementById('edad').value;
var name = document.getElementById('nombre').value;
var lista = document.getElementById('lista').value;
if(name.length == 0){
alert('Introduce un nombre');
return false;
}
if(edad<18 || edad>65 || (edad="")){
alert('Acceso restringido a edades no comprendidas entre 18 y 65 años');
return false;
}
if(lista == ""){
alert('Debe Elegir una opcion en la lista');
return false;
}
if(!document.getElementById('terms').checked){
alert('Necesario aceptar los Términos y condiciones');
return false;
}
return true;
}
</script>
</head>
<body>
<form onsubmit="return validate()" method="post" action="procesa.php">
<fieldset>
<table class="" >
<tr>
<td>
Nombre: <input type="text" id="nombre"class="inputs" style="width: 130px" required><br><br>
</td>
<td>
Edad: <input type="number" id="edad" class="inputs" style="width: 80px"><br><br>
</td>
</tr>
<tr>
<td>
Sexo: <input type="radio" id="r1" class="inputs" name="genero"><label for="r1">Masculino</label>
<input type="radio" id="r2" class="inputs" name="genero"><label for="r2">Femenino</label><br>
</td>
</tr>
<tr>
<td>
Aceptar términos y condiciones: <input type="checkbox" id="terms" class="" name="terms" required><br>
</td>
</tr>
<tr>
<td>
Ciudad<select id="lista">
<option value="1" disabled selected value>Elige una opcion</option>
<option value="Sevilla">Sevilla</option>
<option value="Cordoba">Cordoba</option>
<option value="Granada">Granada</option>
<option value="Cádiz">Cádiz</option>
</select><br>
</td>
</tr>
<tr>
<td>
<input type="submit" onClick="">
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>