Validación previa de un campo de texto con Ajax y PHP

25 de diciembre de 2007

Hacemos un nuevo ejercicio con Ajax y PHP usando la librería Xajax, en el que validamos el nombre de un país antes de enviar el formulario.

A veces las páginas utilizan interfaces complejas para validar campos de un formulario antes de enviarlo. Posiblemente ya hemos visto alguno de estos controles personalizados en alguna página web. No obstante, para explicar lo que vamos a hacer, es una buena idea ver el ejemplo en marcha.

Este componente de formulario, que incorpora Javascript + Ajax + PHP + Base de datos MySQL, sirve para que un visitante que escribe un nombre de país, lo valide apretando un botón para ver si existe o se ha escrito correctamente. En caso que el usuario escriba sólo unas letras del nombre del país, por ejemplo "es", cuando aprieta el enlace de validar, el componente busca todos los países que tienen ese texto y los muestra para que el usuario elija el que desea.

Antes de continuar conviene decir que este taller está creado como continuación de una serie de artículos sobre la librería Xajax para el trabajo con Ajax y PHP. Hay temas importantes que no vamos a explicar porque ya se vieron en capítulos anteriores.

El formulario HTML

Comenzamos mostrando el formulario que hemos utilizado para construir el ejemplo:

<div id="todo_formulario">
   <form action="#" method="post" name="f1" id="f1">
   <div id="input_pais">
      Nombre país: <input type="text" name="nombre_pais"> <a style='cursor:pointer;text-decoration:underline; color:#0000ff;' onclick="xajax_validar_pais(document.f1.nombre_pais.value);">Validar pais</a>
   </div>
   <div id="validador_pais"></div>
   <p>
   Año de visita: <input type="text" name="ano" size="8">
   <p>
   <input type="button" onclick="xajax_procesar_formulario(xajax.getFormValues('f1'))" value="Enviar">
   </form>
</div>

Tenemos un campo de texto donde el usuario escribe el país, un enlace al lado para validarlo y unas capas o etiquetas <div> que delimitan ciertas áreas donde vamos a mostrar datos desde Ajax. Luego hay un botón para enviar el formulario, que también se procesa con una llamada a una función Javascript que hace uso de Ajax.

La llamada Ajax para validar el país

Tenemos una función creada con PHP, que hace uso de XajaX para poder procesarla con Ajax, que es la que se encarga de validar lo que haya escrito el usuario en el campo país.

xajax_validar_pais(document.f1.nombre_pais.value);

La función recibe el value del campo input nombre_pais, es decir, lo que haya escrito en el momento de pulsar el enlace.

Lo primero que se comprueba es que el usuario haya escrito al menos dos caracteres en el campo país.

Luego se hace una consulta en la base de datos para seleccionar todos los países que tienen el texto escrito en el campo. Si no encuentra ninguno se muestra un mensaje de error. Si encuentra uno o más países se muestra el listado de naciones encontradas para que el usuario seleccione cuál es la que le interesa. Se utilizan las funciones proporcionadas por un objeto del framework xajax (de la clase xajaxResponse) para mostrar los resultados en la página si refrescar el documento.

Función para procesar el formulario con Ajax y PHP

Para procesar el formulario utilizamos también Ajax y PHP. Para ello hemos realizado la siguiente función PHP que se ejecuta por medio de Ajax:

El formulario comprueba que se haya validado anteriormente el país, para que permita procesarlo.

Javascript para escoger el país deseado

Luego hay una función que también se debe comentar, que es una función Javascript pura, que se procesa totalmente en el cliente, cuando el usuario selecciona el país que desea de los países encontrados al validar el país.

Esta función se ejecuta al pulsar cualquier país de la lista de países encontrados y actualiza el contenido HTML de un par de capas, para mostrar el resultado en la interfaz de usuario y generar un campo hidden con el nombre del país ya validado.

El ejercicio puede resultar complejo, pero no lo es tanto si conocemos de antemano el funcionamiento de las librerías Xajax.

El código completo lo mostramos a continuación:

<?
//incluímos la clase ajax
require ('xajax/xajax.inc.php');

//instanciamos el objeto de la clase xajax
$xajax = new xajax();
$xajax->setCharEncoding('ISO-8859-1');
$xajax->decodeUTF8InputOn();

//conecto con la base de datos
$connectid = mysql_connect("localhost", "root", "");
mysql_select_db("xajax",$connectid);

function validar_pais($nombre_pais){
   if (strlen($nombre_pais)<2) {
      $campo_validacion = "Debes escribir al menos dos letras del campo país.";
   }else{
      $ssql = "select * from pais where nombre_pais like '%$nombre_pais%'";
      $rs = mysql_query($ssql);
      if (mysql_num_rows($rs)==0){
         $campo_validacion = "No he encontrado países con ese nombre";
      }else{
         $campo_validacion = "<i>Se encontraron " . mysql_num_rows($rs) . " posibles países.</i>";
         $campo_validacion .= '<div style="margin:3px;">';
         while ($fila = mysql_fetch_object($rs)){
            $campo_validacion .= "<a style='cursor:pointer;text-decoration:underline; color:#0000ff;' onclick='selecciona_pais(\"" . $fila->nombre_pais . "\");'>";
            $campo_validacion .= $fila->nombre_pais . '</a><br>';
         }
         $campo_validacion .= '</div>';
      }
   }
   $campo_validacion = '<div style="border: 2px solid #0000cc; font-size: 8pt; padding:5px; margin-top:10px; width: 300px;">' . $campo_validacion . '</div>';

   $respuesta = new xajaxResponse('ISO-8859-1');
   $respuesta->addAssign("validador_pais","innerHTML",$campo_validacion);
   return $respuesta;
}

function procesar_formulario($formulario){
   $respuesta = new xajaxResponse('ISO-8859-1');
   if (!isset($formulario["nombre_validado"])){
      $respuesta->addAssign("validador_pais","innerHTML",'<div style="border: 2px solid #cc0000; font-size: 8pt; padding:5px; margin-top:10px; width: 300px;">Tienes que validar el país.</div>');
   }else{
      $respuesta->addAssign("todo_formulario","innerHTML",'Todo correcto!');
   }
   return $respuesta;
}

//registramos funciones
$xajax->registerFunction("validar_pais");
$xajax->registerFunction("procesar_formulario");

//El objeto xajax tiene que procesar cualquier petición
$xajax->processRequests();
?>
<html>
<head>
   <title>Validador campo formulario online</title>
   <?
   //En el <head> indicamos al objeto xajax se encargue de generar el javascript necesario
   $xajax->printJavascript("xajax/");
   ?>
   <script>
   function selecciona_pais(nombre){
      document.f1.nombre_pais.value=nombre
      document.getElementById("validador_pais").innerHTML='<div style="border: 2px solid #00cc00; font-size: 8pt; padding:5px; margin-top:10px; width: 300px;">Validado correctamente</div>';
      document.getElementById("input_pais").innerHTML='<input type="hidden" name="nombre_validado" value="' + nombre + '">' + nombre
   }
   </script>
</head>

<body style="font-family: arial, verdana;">
<div id="todo_formulario">
   <form action="#" method="post" name="f1" id="f1">
   <div id="input_pais">
      Nombre país: <input type="text" name="nombre_pais"> <a style='cursor:pointer;text-decoration:underline; color:#0000ff;' onclick="xajax_validar_pais(document.f1.nombre_pais.value);">Validar pais</a>
   </div>
   <div id="validador_pais"></div>
   <p>
   Año de visita: <input type="text" name="ano" size="8">
   <p>
   <input type="button" onclick="xajax_procesar_formulario(xajax.getFormValues('f1'))" value="Enviar">
   </form>
</div>

<?
mysql_close($conn);
?>
</body>
</html>

Para acabar, podemos ver el ejemplo en marcha.

Miguel Angel Alvarez

Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...

Follow {{ $author->twitter }}

Manual

Trabajo con Ajax en PHP utilizando Xajax

Comprobar la validez de una URL con Ajax

Script para detección de soporte a Ajax, Cookies y ActiveX