Autor Tema: Formularios JavaScript, document.forms, elements validar form Ejercicio CU01175E (Leído 5507 veces)

pedro,, · « **en:** 17 de Enero 2016, 23:35 »

Hola, aquí dejo la solución del ejercicio CU01175E.

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.
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>
		<title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
		<style type="text/css"> label{display:block;margin:5px;}</style>
		<script type="text/javascript">
			function comprobarDatos(nombre){
				var expReg = /[\s\S]{3}/;				
				if(!expReg.test(nombre)){
					return false;
				}else{
					return true;
				}
			}
			function validacionDatosForm1(){
				var formularios = document.forms;
				var comprobacion = false;
				for(var i = 0; i<formularios[0].elements.length; i++){
					if(formularios[0].elements[i].type == 'text'){
						comprobacion = comprobarDatos(formularios[0].elements[i].value);
					}
					if(!comprobacion){
						alert('Hay campos mal rellenados.');
						return false;
					}
				}
			}
			function validacionDatosForm2(){
				var formularios = document.forms;
				var comprobacion = false;
				var contErrores = 0;
				comprobacion = comprobarDatos(formularios[1].nombre.value);
				if(!comprobacion){contErrores++;}
				comprobacion = comprobarDatos(formularios[1].apellidos.value);
				if(!comprobacion){contErrores++;}
				comprobacion = comprobarDatos(formularios[1].email.value);
				if(!comprobacion){contErrores++;}
				comprobacion = comprobarDatos(formularios[1].ciudad.value);
				if(!comprobacion){contErrores++;}
				comprobacion = comprobarDatos(formularios[1].pais.value);
				if(!comprobacion){contErrores++;}
				if(contErrores>0){
					alert('Hay campos mal rellenados.');
					return false;
				}
			}
		</script>
	</head>
	<body>
		<form name ="formularioUsuario" method="get" onsubmit="return validacionDatosForm1()">
			<h2>Formulario apartado a</h2>
			<label>Nombre:<input id="nombreFormUsuario" type="text" name="nombre" /></label>
			<label>Apellidos:<input id="apellidosFormUsuario" type="text" name="apellidos" /></label>
			<label>email:<input id="emailFormUsuario" type="text" name="email" /></label>
			<label>Ciudad:<input id="ciudadFormUsuario" type="text" name="ciudad" /></label>
			<label>País:<input id="paisFormUsuario" type="text" name="pais" /></label>
			<label><input id ="botonEnvio1" type="submit" value="Enviar"></label>
		</form>
		<form name ="formularioUsuario2" method="get" onsubmit="return validacionDatosForm2()">
			<h2>Formulario apartado b</h2>
			<label>Nombre:<input id="nombreFormUsuario" type="text" name="nombre" /></label>
			<label>Apellidos:<input id="apellidosFormUsuario" type="text" name="apellidos" /></label>
			<label>email:<input id="emailFormUsuario" type="text" name="email" /></label>
			<label>Ciudad:<input id="ciudadFormUsuario" type="text" name="ciudad" /></label>
			<label>País:<input id="paisFormUsuario" type="text" name="pais" /></label>
			<label><input id ="botonEnvio1" type="submit" value="Enviar"></label>
		</form>
	</body>
</html>

Saludos.

Ogramar · « **Respuesta #1 en:** 19 de Enero 2016, 11:43 »

Buenas Pedro

Veo el ejercicio bien resuelto. Podrías mejorarlo si quisieras dando mensajes más específicos, por ejemplo en lugar de "Hay campos mal rellenados" indicar "El campo nombre no puede tener menos de 3 letras", aunque esto no se pedía en el ejercicio

Este fragmento posiblemente podrías haberlo compactado con un recorrido de propiedades, un bucle, un for in o algo similar:

Código: [Seleccionar]

				comprobacion = comprobarDatos(formularios[1].nombre.value);
				if(!comprobacion){contErrores++;}
				comprobacion = comprobarDatos(formularios[1].apellidos.value);
				if(!comprobacion){contErrores++;}
				comprobacion = comprobarDatos(formularios[1].email.value);
				if(!comprobacion){contErrores++;}
				comprobacion = comprobarDatos(formularios[1].ciudad.value);
				if(!comprobacion){contErrores++;}
				comprobacion = comprobarDatos(formularios[1].pais.value);
				if(!comprobacion){contErrores++;}

Al principio lo vi y pensé que habría algo mal al ver líneas repetidas, pero realmente no hay nada mal (aunque como te digo pienso que podría compactarse).

Salu2

pedro,, · « **Respuesta #2 en:** 20 de Enero 2016, 00:03 »

Hola Ogramar.

Sobre lo primero que comentas, la verdad que pensé que lo importante en el ejercicio era la forma de acceder a los elementos del formulario, por eso no profundicé mas en esa parte, y en cuanto a los segundo que comenta lo he resuelto de la siguiente forma, solo pongo la funcion...

Código: [Seleccionar]

function validacionDatosForm2(){
				var comprobacion = false;
				var msg='';
				for(var i=0; i<formularioUsuario2.elements.length; i++){
					comprobacion = comprobarDatos(formularioUsuario2[i].value)
					if(!comprobacion){
						msg += 'El campo ' + formularioUsuario2[i].name + ' está incompleto.\n';
					}
				}
				if(msg!=''){
					alert(msg);
					return false;
				}
			}

Intente hacerlo con...

Código: [Seleccionar]

for (i in formularioUsuario2.name ){}
y con un for normal

Código: [Seleccionar]

for(i=0; i< formularioUsuario2[i].name.lenght; i++){}
pero una vez que terminaba de leer los elementos name, no hacia nada mas, haciendo pruebas, formularioUsuario2.name.lenght me dá 18, lo cuál no consigo entender, así que agradecería que me alumbraras.

Gracias de antemano.

Ogramar · « **Respuesta #3 en:** 21 de Enero 2016, 09:12 »

Buenas pedro sí muchas veces a lo mejor comento algo que no era realmente relacionado con los objetivos del ejercicio a lo mejor son solo cosas que me han llamado la atención

Sobre que formularioUsuario2.name.lenght te dé 18 creo que simplemente está tomando el atributo name y contando los caracteres

Si contamos caracteres en formularioUsuario2 obtenemos 18 que lo saca del atributo name en

<form name ="formularioUsuario2"

Salu2

pedro,, · « **Respuesta #4 en:** 21 de Enero 2016, 13:32 »

Hola Ogramar.

Finalmente dejé el ejercicio de la siguiente forma.

Código: [Seleccionar]

<!DOCTYPE html>
<html>
	<head>
		<title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
		<style type="text/css"> label{display:block;margin:5px;}</style>
		<script type="text/javascript">
			function comprobarDatos(campoForm){
				var expReg = /[\s\S]{3}/;				
				if(!expReg.test(campoForm)){
					return false;
				}else{
					return true;
				}
			}
			function validacionDatosForm1(){
				var formularios = document.forms;
				var comprobacion = false;
				var msg='';
				for(var i = 0; i<formularios[0].elements.length; i++){
					if(formularios[0].elements[i].type == 'text'){
						comprobacion = comprobarDatos(formularios[0].elements[i].value);
						if(!comprobacion){
							msg += 'El campo ' + formularioUsuario2[i].name + ' no puede tener menos de tres letras.\n';
						}
					}	
				}
				if(msg!=''){
						alert(msg);
						return false;
				}
			}
			function validacionDatosForm2(){
				var comprobacion = false;
				var msg='';
				for(var i=0; i<formularioUsuario2.elements.length; i++){
					comprobacion = comprobarDatos(formularioUsuario2[i].value)
					if(!comprobacion){
						msg += 'El campo ' + formularioUsuario2[i].name + ' está incompleto.\n';
					}
				}
				if(msg!=''){
					alert(msg);
					return false;
				}
			}
		</script>
	</head>
	<body>
		<form name ="formularioUsuario" method="get" onsubmit="return validacionDatosForm1()">
			<h2>Formulario apartado a</h2>
			<label>Nombre:<input id="nombreFormUsuario" type="text" name="nombre" /></label>
			<label>Apellidos:<input id="apellidosFormUsuario" type="text" name="apellidos" /></label>
			<label>email:<input id="emailFormUsuario" type="text" name="email" /></label>
			<label>Ciudad:<input id="ciudadFormUsuario" type="text" name="ciudad" /></label>
			<label>País:<input id="paisFormUsuario" type="text" name="pais" /></label>
			<label><input id ="botonEnvio1" type="submit" value="Enviar"></label>
		</form>
		<form name ="formularioUsuario2" method="get" onsubmit="return validacionDatosForm2()">
			<h2>Formulario apartado b</h2>
			<label>Nombre:<input id="nombreFormUsuario" type="text" name="nombre" /></label>
			<label>Apellidos:<input id="apellidosFormUsuario" type="text" name="apellidos" /></label>
			<label>email:<input id="emailFormUsuario" type="text" name="email" /></label>
			<label>Ciudad:<input id="ciudadFormUsuario" type="text" name="ciudad" /></label>
			<label>País:<input id="paisFormUsuario" type="text" name="pais" /></label>
			<label><input id ="botonEnvio1" type="submit" value="Enviar"></label>
		</form>
	</body>
</html>

En efecto lo que hace esa linea es contar los caracteres que contiene la palabra.

Lo que no me queda claro es si realmente, de la manera que lo he resuelto es lo que pide el apartado b.

Saludos y gracias otra vez.

Ogramar · « **Respuesta #5 en:** 21 de Enero 2016, 19:04 »

Buenas

Sobre el apartado b) yo creo que lo que pedía era acceder manualmente a los campos, un acceso manual sería por ejemplo formularioUsuario2.nombre, otro formularioUsuario2.apellidos, etc.

Lo que me he fijado ahora es que tienes repetidos atributos id y atributos name, esto aunque sea un ejercicio es no aconsejable, un id tiene que ser siempre único, no debemos tener dos id iguales ni de broma, y en caso de tener dos formularios yo tampoco repetiría el valor de atributos name. Si fueran dos códigos indepedientes estaría bien, pero habiendo agrupado en un sólo html se debería evitar

Salu2

pedro,, · « **Respuesta #6 en:** 21 de Enero 2016, 19:15 »

Hola otra vez,

Pero la manera en que lo resolví la primera vez es manualmente, ¿no?

Código: [Seleccionar]

comprobacion = comprobarDatos(formularios[1].nombre.value);

Lo que comentas sobre los id lo tengo claro, lo que pasa es que en un principio iban a ser dos html y al unirlos se me pasó cambiar id y name.

.

Ogramar · « **Respuesta #7 en:** 21 de Enero 2016, 20:50 »

Sí tienes razón con lo de que lo habías hecho manualmente en el primero, creo que me hecho un pequeño lío

pedro,, · « **Respuesta #8 en:** 21 de Enero 2016, 21:37 »

Jaja, bueno, es casi normal que te pueda pasar algo así después de todos los ejercicios que corriges.

Entonces finalmente la parte que era la manual, cambié la forma de comprobar y dar el mensaje de error, quedando así:

Código: [Seleccionar]

<!DOCTYPE html>
<html>
	<head>
		<title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
		<style type="text/css"> label{display:block;margin:5px;}</style>
		<script type="text/javascript">
			function comprobarDatos(nombre){
				var expReg = /[\s\S]{3}/;				
				if(!expReg.test(nombre)){
					return false;
				}else{
					return true;
				}
			}
			function validacionDatosForm1(){
				var formularios = document.forms;
				var comprobacion = false;
				var msg='';
				for(var i = 0; i<formularios[0].elements.length; i++){
					if(formularios[0].elements[i].type == 'text'){
						comprobacion = comprobarDatos(formularios[0].elements[i].value);
						if(!comprobacion){
							msg += 'El campo ' + formularioUsuario2[i].name + ' no puede tener menos de tres letras.\n';
						}
					}	
				}
				if(msg!=''){
						alert(msg);
						return false;
				}
			}
			function validacionDatosForm2(){
				var formularios = document.forms;
				var comprobacion = [];
				var nombreCampo = ['Nombre', 'Apellidos', 'Email', 'Ciudad', 'País'];
				var msg='';
				comprobacion[0] = comprobarDatos(formularios[1].nombre.value);
				comprobacion[1] = comprobarDatos(formularios[1].apellidos.value);
				comprobacion[2] = comprobarDatos(formularios[1].email.value);
				comprobacion[3] = comprobarDatos(formularios[1].ciudad.value);
				comprobacion[4] = comprobarDatos(formularios[1].pais.value);
				for(var i=0; i<comprobacion.length; i++){
					if(!comprobacion[i]){ msg += 'El campo ' + nombreCampo[i] + ' no puede tener menos de tres letras.\n';}
				}
				if(msg!=''){
					alert(msg);
					return false;
				}
			}
		</script>
	</head>
	<body>
		<form name ="formularioUsuario" method="get" onsubmit="return validacionDatosForm1()">
			<h2>Formulario apartado a</h2>
			<label>Nombre:<input id="nombreFormUsuario" type="text" name="nombre" /></label>
			<label>Apellidos:<input id="apellidosFormUsuario" type="text" name="apellidos" /></label>
			<label>email:<input id="emailFormUsuario" type="text" name="email" /></label>
			<label>Ciudad:<input id="ciudadFormUsuario" type="text" name="ciudad" /></label>
			<label>País:<input id="paisFormUsuario" type="text" name="pais" /></label>
			<label><input id ="botonEnvio1" type="submit" value="Enviar"></label>
		</form>
		<form name ="formularioUsuario2" method="get" onsubmit="return validacionDatosForm2()">
			<h2>Formulario apartado b</h2>
			<label>Nombre:<input id="nombre" type="text" name="nombre" /></label>
			<label>Apellidos:<input id="apellidos" type="text" name="apellidos" /></label>
			<label>email:<input id="email" type="text" name="email" /></label>
			<label>Ciudad:<input id="ciudad" type="text" name="ciudad" /></label>
			<label>País:<input id="paisFormUsuario" type="text" name="pais" /></label>
			<label><input id ="boton" type="submit" value="Enviar"></label>
		</form>
	</body>
</html>

Espero que con ese ya sea suficiente.

Ogramar · « **Respuesta #9 en:** 22 de Enero 2016, 07:53 »

Este ejercicio puedes darlo por más que superado

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

Noticias:

Autor Tema: Formularios JavaScript, document.forms, elements validar form Ejercicio CU01175E (Leído 5507 veces)

pedro,,

Formularios JavaScript, document.forms, elements validar form Ejercicio CU01175E

Ogramar

Re:Formularios JavaScript, document.forms, elements validar form Ejercicio CU01175E

pedro,,

Re:Formularios JavaScript, document.forms, elements validar form Ejercicio CU01175E

Ogramar

Re:Formularios JavaScript, document.forms, elements validar form Ejercicio CU01175E

pedro,,

Re:Formularios JavaScript, document.forms, elements validar form Ejercicio CU01175E

Ogramar

Re:Formularios JavaScript, document.forms, elements validar form Ejercicio CU01175E

pedro,,

Re:Formularios JavaScript, document.forms, elements validar form Ejercicio CU01175E

Ogramar

Re:Formularios JavaScript, document.forms, elements validar form Ejercicio CU01175E

pedro,,

Re:Formularios JavaScript, document.forms, elements validar form Ejercicio CU01175E

Ogramar

Re:Formularios JavaScript, document.forms, elements validar form Ejercicio CU01175E

Preguntas y respuestas