Autor Tema: Ajax validación de formularios Uso de POST Método encodeURIComponent. CU01212F (Leído 3157 veces)

pedro,, · « **en:** 23 de Marzo 2016, 23:11 »

Hola.

Otra propuesta como solución al ejercicio del tema CU01212F del curso de Ajax.

Citar

EJERCICIO
Muchas validaciones se realizan del lado del cliente usando JavaScript, pero otras se realizan del lado del servidor (por ejemplo comprobar si un nombre de usuario está libre para dar de alta a un usuario, o comprobar si un correo electrónico está libre para registrar a un usuario en un foro).
Crea un documento HTML que conste de:
a) Un título H1 con el texto “Alta de usuarios”
b) Un formulario con un campo Nombre, otro Apellidos y otro Nombre de Usuario.
c) Una utilidad Ajax que informe si el nombre de usuario ya existe cada vez que el campo correspondiente a nombre del usuario pierda el foco. En ese momento deberá mostrarse un mensaje “Nombre de usuario libre” ó si no está libre, “Nombre de usuario no disponible”.
Para comprobar si ya existe el nombre de usuario debes realizar una invocación al archivo comprobarUsuarios.php donde deberás definir la lista de nombres de usuario existentes como un array php (por ejemplo puedes usar el array nombreExistente[0]='juan'; nombreExistente[1]='pedro'; nombreExistente[2]='alfredo'; nombreExistente[ 3 ]='luis' ; ) y añadir el código necesario para obtener la funcionalidad deseada.

archivo ejercicioCU01212F.php

Código: [Seleccionar]

<meta charset = "utf-8"/>
<?php // Datos
	$nombreExistente = array('juan', 'pedro', 'alfredo', 'luis'); 	
	// Rescatamos el parámetro userName que nos llega mediante post
	$userNameRecivido = $_POST["userName"];
	$msg='';
	$existeUserName = false;
	for ($i = 0; $i<count($nombreExistente) ; $i++) {
		if ($userNameRecivido == $nombreExistente[$i]) {
			$existeUserName=true;
		}
	}
	if ($existeUserName) {
		$msg = 'Nombre de usuario no disponible';
	} else {
		$msg = 'Nombre de usuario libre';
	}	
	echo $msg;
?>

código html...

Código: [Seleccionar]

<!DOCTYPE html>
<html>
	<head><title>Cursos aprende a programar</title><meta charset="utf-8">		
		<style type="text/css">
			*{font-family:sans-serif;} 
			#comprobacion {background-color: yellow; color: blue;}
		</style>
		
		<script>			
			window.onload = function(){
				userName = document.getElementById('nombreUsuario');
				userName.addEventListener('blur', comprobarUserName);	
			}
			function comprobarUserName(){
				var xmlhttp;
				var userName = document.getElementById('nombreUsuario');
				var nodoMostrarResultado = document.getElementById('mostrarResultado');
				var contenidoRecibido = '';
				if (userName.value.length==0) {
					document.getElementById("txtInformacion").innerHTML="";
					nodoMostrarResultado.innerHTML = '';
					return;
				}
				xmlhttp = new XMLHttpRequest();
				xmlhttp.onreadystatechange = function() {
					if (xmlhttp.readyState==4 && xmlhttp.status==200) {
						contenidoRecibido = xmlhttp.responseText;
						document.getElementById("txtInformacion").innerHTML = contenidoRecibido;
						userName.nextSibling.innerHTML = contenidoRecibido;
					}
				}
				var cadenaParametros = 'userName='+ encodeURIComponent(userName.value);
				xmlhttp.open('POST', 'ejercicioCU01212F.php'); // Método post y url invocada
				xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); // Establecer cabeceras de petición
				xmlhttp.send(cadenaParametros); // Envio de parámetros usando POST*/
			}
		</script>
	</head>	
	<body style="margin:20px;">
		<h1>Alta usuario</h1>
		<form action="">
			<label>Nombre: <input type="text" id="nombre"/></label><br/>
			<label>Apellidos: <input type="text" id="apellidos"/></label><br/>
			<label>Nombre de usuario: <input type="text" id="nombreUsuario"/><span id="comprobacion"></span></label><br/>
		</form>
		<br/>
		<p>Informacion sobre operacion en segundo plano con POST y Ajax: <span style="color:brown;" id="txtInformacion"></span></p>
		<div id="mostrarResultado"> </div>
	</body>

http://aprendehtml.byethost3.com/Ajax/CU01212F/ejercicioCU01212F.html

Saludos.

Alex Rodríguez · « **Respuesta #1 en:** 26 de Marzo 2016, 21:33 »

Hola Pedro todo funciona correctamente

Haces uso del DOM como en userName.nextSibling.innerHTML = contenidoRecibido; donde podrías haberlo resuelto de otra manera sin usar nextSibling. Realmente funciona el problema que le veo es que nextSibling hace referencia al siguiente elemento de representación en el árbol del DOM y aquí asumimos un riesgo: que un navegador mantenga una representación interna distinto a otro y el código falle en un navegador. En cambio usando getElementById('comprobacion') se supone que estamos usando un método seguro en el sentido de que todos los navegadores deberían responder igual.

Saludos

pedro,, · « **Respuesta #2 en:** 27 de Marzo 2016, 23:49 »

Hola Alex.

Lo resolvía así, creo que sin pensarlo mucho, me imagino que como hice el anterior ejercico y este casi seguidos y en el anterior lo había estado usando pues lo usé este también. Pero pensándolo, tienes toda la razón, hay que ir a lo seguro. Ahora lo corregiré.

Gracias.

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

Noticias: