Autor Tema: JavaScript addeventlistener onsubmit return false no funciona impedir CU01159E (Leído 2529 veces)

lekimb · « **en:** 27 de Mayo 2020, 21:09 »

Hola a todos y a todas. Comparto mi solución al ejercicio CU01159E del curso de javascript desde cero, así como un par de preguntillas para las que no acabo de encontrar respuesta.

1) No consigo impedir el envío del formulario. Según creo, para lograr esto hay hacer que la función que ha sido invocada con 'onsubmit' devuelva el valor booleano 'false' para que no se ejecute la acción HTML predeterminada (el envío del form) después del script.
Aunque me parece que las condiciones establecidas en los 'if' sí que se ejecutan como debieran, no entiendo porque el formulario se sigue enviando a pesar de todo.

2) No sé si hay alguna manera más eficiente de indicar que "SI alguna de las condiciones no se cumple, ENTONCES return false", más allá de incluirlas todas entre operadores OR(||) como hago el final de la función. Porque si se introduce la sentencia 'return false' después de cada una de las condiciones, el problema es que la función se detendría en cuanto la primera condición no se cumpliera y no ejecutaría ya el resto de acciones para los otros condicionales.

No se si me ha quedado un poco denso todo... En fin, si alguien ve el fallo de 1 o quiere aportar alguna idea para 2, estaré muy agradecido!

Os dejo el código:

Código: [Seleccionar]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
<script type="text/javascript">
	
	window.onload = function(){ 
		var formulario = document.querySelector('form');
		formulario.addEventListener('submit', comprobarEnvio);
		
		var nombre = document.getElementById('nombre');
		var apellidos = document.getElementById('apellidos');
		var edad = document.getElementById('edad');
		var correo = document.getElementById('correo');
		var reglaArroba = /@/; //El correo debe contener el símbolo arroba
		var reglaPunto = /\./; //El correo debe contener un punto
		var regla3 = /^\w{1,}@\w{1,}\.\w{2,}/; 
		
		function comprobarEnvio(){
			var valorEdad = edad.value
			valorEdad = Number(valorEdad);
			
			if (nombre.value == false || apellidos.value == false){
				alert('El nombre y los apellidos son campos obligados');
				nombre.style.backgroundColor = 'red';
				apellidos.style.backgroundColor = 'red';
			}
			if (reglaArroba.test(correo.value) == false || reglaPunto.test(correo.value) == false){
				alert('El campo \"Correo electrónico\" debe contener los símbolos arroba y punto');
				correo.style.backgroundColor = 'red';
			}
			if (regla3.test(correo.value) == false){
				alert('Debe haber una letra al menos antes y después de la arroba y dos letras como mínimo después del punto');
				correo.style.backgroundColor = 'red';
			}
			if (valorEdad <= 0){
				alert('La edad no puede ser cero o inferior a cero');
				edad.style.backgroundColor = 'red';
			}
			if (nombre.value == false || apellidos.value == false || reglaArroba.test(correo.value) == false || reglaPunto.test(correo.value) == false || regla3.test(correo.value) == false || valorEdad <= 0){
				return false;
			}
		}
		
		
		/*Devolver el color original a los elementos input con el evento 'focus'*/
		var inputs = document.getElementsByTagName('input');
		for (var i = 0; i < inputs.length; i++){
			inputs[i].addEventListener('focus', colorOriginal);
		}
		function colorOriginal(){
			if (this.style.backgroundColor == 'red'){
				this.style.backgroundColor = 'transparent';
			}
		}
		
	}
</script>
	</head>
	<body>
		<form method="get" action="">
			<label for="nombre">Nombre:</label><input id="nombre" name="nombre" type="text"/> <br/><br/>
			<label for="apellidos">Apellidos:</label><input id="apellidos" name="apellidos" type="text"/> <br/><br/>
			<label for="edad">Edad:</label><input id="edad" name="edad" type="text"/> <br/><br/>
			<label for="correo">Correo electrónico:</label><input id="correo" name="correo" type="text"/> <br/><br/>
			<input id="enviar" type="submit" value="Enviar formulario" /><input id="cancelar" type="reset" value="Cancelar" />
		</form>
	</body>
</html>

Ogramar · « **Respuesta #1 en:** 08 de Octubre 2020, 14:29 »

Buenas, para quien revise este ejercicio comentar algunas cosas.

- Falta responder al ejercicio 1 de la entrega CU01159E del curso.

- En este otro hilo puede verse la respuesta al ejercicio 1 y una forma alternativa de solución para el ejercicio 2 donde se usa onsubmit como atributo del form en lugar de definirlo con un addEventListener https://aprenderaprogramar.com/foros/index.php?topic=4018.0 Esta forma es más adecuada en este momento del curso ya que en la entrega CU01159E aún no se ha explicado preventDefault()

- Respecto a la pregunta de que no se consigue impedir el envío del formulario. En la solución dada, donde se define el submit con un addEventListener, para que no se envíe el formulario cuando fallen las condiciones habría que recibir el evento como parámetro de la función comprobarEnvio y aplicarle preventDefault() para evitar el envío cuando fallan las condiciones.

Habría que introducir el evento como parámetro recibido (automáticamente) y el fragmento a modificar quedaría así:

Código: [Seleccionar]

		function comprobarEnvio(elEvento){

//Aquí el resto del código hasta llegar a


	if (nombre.value == false || apellidos.value == false || reglaArroba.test(correo.value) == false || reglaPunto.test(correo.value) == false || regla3.test(correo.value) == false || valorEdad <= 0){
				elEvento.preventDefault();
				return false;
			}

De este modo se evita el envío del formulario.

- Respecto a la pregunta de una manera más eficiente de indicar que "SI alguna de las condiciones no se cumple, ENTONCES return false" puede hacerse usando un parámetro booleano por ejemplo hayErrores que inicialmente se establecerá como hayErrores=false; de modo que si se ha detectado algún problema se habrá hecho hayErrores = true; De este modo la única comprobación a realizar sería comprobar si hayErrores tiene valor true.

Salu2

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: