Autor Tema: JavaScript No usar variables globales sin ser estrictamente necesarias CU01175E (Leído 2504 veces)

Dimitar Stefanov · « **en:** 12 de Abril 2016, 21:58 »

Buenas noches. Os dejo una posible solución del ejercicio CU01175E del curso JavaScript desde cero.

Citar

EJERCICIO

Un uso habitual de JavaScript con formularios es usar JavaScript para validar que el contenido introducido por el usuarios sea válido. Crea un formulario que conste de cinco campos: nombre, apellidos, email, ciudad y país. Usando el evento onsubmit, realiza la validación para:

a) Comprobar que en el momento del envío ninguno de los campos tiene menos de dos caracteres (es decir, si está vacío, contiene una letra o dos letras se considerará no válido) accediendo a los campos mediante document.forms y elements.

Código: [Seleccionar]

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Ejemplo aprenderaprogramar.com</title>
	<script type="text/javascript">
		
		var parrent = /\w{3,}/;

		function comprobar(){
			var formulario = document.forms[0];
			for(var i=0;i<formulario.elements.length-1;i++){
				if(!parrent.test(formulario.elements[i].value)){
					alert('Todos los campos son obligatorio y tienen que tener más de 2 carácteres');
					return false;
				};
			}
		}

	</script>
</head>
<body>
	<div id="cabecera">
		<h2>Cursos aprenderaprogramar.com</h2>
		<h3>Ejemplos JavaScript</h3>
	</div>
	<form action="accion1.html" method="get" name="formularioContacto" onsubmit="return comprobar()">
		<h2>Formulario de contacto</h2>
		<label>Nombre: <input type="text" name="nombre" id="nombreFormContacto"></label><br><br>
		<label>Apellidos: <input type="text" name="apellidos" id="apellidosFormContacto"></label><br><br>
		<label>Email: <input type="text" name="correo" id="correoFormContacto"></label><br><br>
		<label>Ciudad: <input type="text" name="ciudad" id="ciudadFormContacto"></label><br><br>
		<label>País: <input type="text" name="pais" id="paisFormContacto"></label><br><br>
		<label><input type="submit" value="Enviar" id="botonEnvio1"></label>
	</form>
</body>
</html>

Citar

b) Igual que el apartado a) pero accediendo a los campos directamente usando el atributo name (por ejemplo formularioContacto.apellidos haría alusión a un elemento input cuyo atributo name es apellidos en un formulario cuyo atributo name es formularioContacto)

Código: [Seleccionar]

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Ejemplo aprenderaprogramar.com</title>
	<script type="text/javascript">
		
		var parrent = /\w{3,}/;
		var nombre;
		var apellidos;
		var correo;
		var ciudad;
		var pais;

		window.onload = function(){
			nombre = parrent.test(document.formularioContacto.nombre.value);
			apellidos = parrent.test(document.formularioContacto.apellidos.value);
			correo = parrent.test(document.formularioContacto.correo.value);
			ciudad = parrent.test(document.formularioContacto.ciudad.value);
			pais = parrent.test(document.formularioContacto.pais.value);
		}

		function comprobar(){
			if(!nombre || !apellidos || !correo || !ciudad || !pais){
				alert('Todos los campos son obligatorio y tienen que tener más de 2 carácteres');
				return false;
			}
		}

	</script>
</head>
<body>
	<div id="cabecera">
		<h2>Cursos aprenderaprogramar.com</h2>
		<h3>Ejemplos JavaScript</h3>
	</div>
	<form action="accion1.html" method="get" name="formularioContacto" onsubmit="return comprobar()">
		<h2>Formulario de contacto</h2>
		<label>Nombre: <input type="text" name="nombre" id="nombreFormContacto"></label><br><br>
		<label>Apellidos: <input type="text" name="apellidos" id="apellidosFormContacto"></label><br><br>
		<label>Email: <input type="text" name="correo" id="correoFormContacto"></label><br><br>
		<label>Ciudad: <input type="text" name="ciudad" id="ciudadFormContacto"></label><br><br>
		<label>País: <input type="text" name="pais" id="paisFormContacto"></label><br><br>
		<label><input type="submit" value="Enviar" id="botonEnvio1"></label>
	</form>
</body>
</html>

Gracias.

Mario R. Rancel · « **Respuesta #1 en:** 15 de Abril 2016, 23:22 »

Buenas tardes

El ejercicio a) correcto

Para el ejercicio b) he hecho algunas pruebas y no he obtenido un resultado satisfactorio. En concreto he rellenado con tres o más letras todos los campos y me impide el envío del formulario (aparece "Todos los campos son obligatorio y tienen que tener más de 2 carácteres")

Este ejercicio pienso es mejor rehacerlo completamente teniendo en cuenta:

- No usar variables globales sin ser estrictamente necesarias

- Si se quiere realizar una validación, el trabajo de esa validación debe recaer en una función (si se quiere apoyada por funciones auxiliares), no es adecuado repartir el trabajo de la validación por distintos lugares

- La validación tiene que hacerse en cierto momento temporal, cuando el usuario va a enviar el formulario (hay que detectar ese evento).

No puedes hacer trabajo de validación en un momento temporal como el load de la página, ese no es un momento temporal o evento adecuado para validar el envío de un formulario

Código: [Seleccionar]

		window.onload = function(){
			nombre = parrent.test(document.formularioContacto.nombre.value);
			apellidos = parrent.test(document.formularioContacto.apellidos.value);
			correo = parrent.test(document.formularioContacto.correo.value);
			ciudad = parrent.test(document.formularioContacto.ciudad.value);
			pais = parrent.test(document.formularioContacto.pais.value);
		}

Saludos

Dimitar Stefanov · « **Respuesta #2 en:** 21 de Abril 2016, 14:10 »

Buenas, Mario.

Gracias, de nuevo, por corregirme el ejercicio. Tomo nota sobre el segundo ejercicio, lo haré de nuevo y lo subiré en el mismo hilo.

Pues, manos a la hora.

Un saludo.

Dimitar Stefanov · « **Respuesta #3 en:** 21 de Abril 2016, 14:53 »

Hola, de nuevo.

Creo que he conseguido el cometido del segundo ejercicio de la entrega CU001175E.

A continuación adjunto el código:

Código: [Seleccionar]

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Ejemplo aprenderaprogramar.com</title>
	<script type="text/javascript">
		
		var parrent = /\w{3,}/;

		var nombre;
		var apellidos;
		var correo;
		var ciudad;
		var pais;

		window.onload = function(){
			nombre = document.formularioContacto.nombre.value;
			apellidos = document.formularioContacto.apellidos.value;
			correo = document.formularioContacto.correo.value;
			ciudad = document.formularioContacto.ciudad.value;
			pais = document.formularioContacto.pais.value;
		}

		function comprobar(){
			nombre = parrent.test(nombre);
			apellidos = parrent.test(apellidos);
			correo = parrent.test(correo);
			ciudad = parrent.test(ciudad);
			pais = parrent.test(pais);
			if(!nombre || !apellidos || !correo || !ciudad || !pais){
				alert('Todos los campos son obligatorio y tienen que tener más de 2 carácteres');
				return false;
			}
		}

	</script>
</head>
<body>
	<div id="cabecera">
		<h2>Cursos aprenderaprogramar.com</h2>
		<h3>Ejemplos JavaScript</h3>
	</div>
	<form action="accion1.html" method="get" name="formularioContacto" onsubmit="return comprobar()">
		<h2>Formulario de contacto</h2>
		<label>Nombre: <input type="text" name="nombre" id="nombreFormContacto"></label><br><br>
		<label>Apellidos: <input type="text" name="apellidos" id="apellidosFormContacto"></label><br><br>
		<label>Email: <input type="text" name="correo" id="correoFormContacto"></label><br><br>
		<label>Ciudad: <input type="text" name="ciudad" id="ciudadFormContacto"></label><br><br>
		<label>País: <input type="text" name="pais" id="paisFormContacto"></label><br><br>
		<label><input type="submit" value="Enviar" id="botonEnvio1"></label>
	</form>
</body>
</html>

Sobre las variables globales, creo que de la forma que he hecho el código son necesarias.

Gracias.

Saludos.

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

Noticias:

Autor Tema: JavaScript No usar variables globales sin ser estrictamente necesarias CU01175E (Leído 2504 veces)

Dimitar Stefanov

JavaScript No usar variables globales sin ser estrictamente necesarias CU01175E

Mario R. Rancel

Re:JavaScript No usar variables globales sin ser estrictamente necesarias CU01175E

Dimitar Stefanov

Re:JavaScript No usar variables globales sin ser estrictamente necesarias CU01175E

Dimitar Stefanov

Re:JavaScript No usar variables globales sin ser estrictamente necesarias CU01175E

Preguntas y respuestas