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

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
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.

« Última modificación: 26 de Marzo 2016, 21:26 por Alex Rodríguez »

Alex Rodríguez

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2050
    • Ver Perfil
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,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
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.


 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".