0

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>&nbsp;
				</td>

				<td>
					Edad: <input type="number" id="edad" class="inputs" style="width: 80px"><br><br>&nbsp;
				</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>&nbsp;
				</td>
			</tr>
			
			<tr>
				<td>
					Aceptar términos y condiciones: <input type="checkbox" id="terms" class="" name="terms" required><br>&nbsp;
				</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>&nbsp;
				</td>
			</tr>
			<tr>
					<td>
						<input type="submit" onClick="">
					</td>
			</tr>

		</table>

	</fieldset>
	
</form>
 </body>
</html>

1 respuesta 1

0

En el if del campo "nombre" intenta reemplazando la variable name.length == 0; por la variable name == "";

El if que tienes con el campo "edad" déjalo de la siguiente forma:

if(edad<18 || edad>65){
    alert('Acceso restringido a edades no comprendidas entre 18 y 65 años');
    return false;   
}

Luego crea otro if seguido de ese para verificar que el campo no este vacío:

if(edad==""){
    alert('El campo edad no puede estar vacío');
}

En el la lista, la primera opción que tienes pon value="" indicando de esta forma que el primer campo no tiene valor alguno. Luego dentro de tu función validate() pon lo siguiente:

ciudad = document.getElementById("lista").selectedIndex;
if( ciudad == null || ciudad == 0 ) {
    alert('Debes seleccionar una ciudad');
    return false;
}

Para el checkbox, debes poner lo siguiente:

casilla = document.getElementById("terms");
if( !casilla.checked ) {
    alert('Debe aceptar los terminos y condiciones');
    return false;
}
5
  • Muchas gracias, he conseguido resolver la edad, pero los demás campos no se me validan y por lo tanto se envia el formulario. Commented el 12 feb. 2020 a las 20:06
  • @AlejandroCastroEcija he actualizado la respuesta, espero haber resuelto tus dudas, saludos. Commented el 12 feb. 2020 a las 20:19
  • NO puse nada, muchas gracias @Diego Mansilla por tu ayuda y aportación, conseguí resolver el código!! Commented el 18 feb. 2020 a las 19:20
  • @AlejandroCastroEcija seria genial que lo marcaras como respuesta para ayudar a los demas que tengan las mismas dudas que tu, saludos!! Commented el 18 feb. 2020 a las 19:26
  • @AlejandroCastroEcija Podrias marcar como respuesta por favor, ya que me han bloqueado la cuenta por no tener puntuacion en mis respuestas, gracias. Commented el 3 mar. 2020 a las 12:14

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.