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

  • Por
  • Ajax
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.

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;
}

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:

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;
}

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.

<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>

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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Gustavo Diaz

07/4/2009
Ejercicio Validación previa de un campo de texto con Ajax y PHP
Para el desarrollo de las aplicaciones estoy empleando Dreamweaber para crear las paginas y easy php para poder compilar los ejercicios, sin embargo he notado que ninguno de estos me ejecuta, todos me presentan errores, por lo tanto mi pregunta es: En que parte del Easy php debo descargar los instaladores del ajax, en apache o directamente en la carpeta WWW dentro de la carpeta que contiene mi programa, ya q no me reconoce la ejecucion de este.

gracias

Gustavo

Burbuja

09/4/2009
No funciona el Ejemplo
Hola Desarrollores, he estado probando el código que se refieren a la validación de un campo, pero no me funciona, al ejecutarlo la pantalla se muestra con el código en pantalla es como si hubiera un echo, imagino que es algo en sintaxi, ustedes pueden proporcionar el código del ejemplo, le agradecería necesito hacer exactamente lo que hace este ejemplo : (

Burbuja

25/4/2009
Ok listo
Desarrolladores, listo me funcionó perfectamente un millón de gracias.

stanley6388

10/5/2009
duda acerca de javascrip y php
Tengo entendido que con javascript trabajo del lado del cliente y php del lado del servidor.,.pero tengo una duda si tengo un formulario y hago todas mis validaciones con javascript de que me sirve php,,,solo para enviar esos datos al servidor y guardarlo en tal caso en una base de datos.,.???? disculpenme pero soy nuevo en este tema de programacion web

Luis

07/1/2011
Validación
Buenas tardes, soy un universitario que esta desarrollando un servicio web para Navision como proyecto de fin de carrera, y me gustaria poder añadir este ejemplo a la hora de hacer mi formalario de inscripciones.
Soy estudiante, y la verdad es que estoy empezando en esto...ya tengo tanto el servicio como el cliente acabados, unicamente estoy dandole unas mejoras...como bien podría ser el validar ciertos campos, y un poco de ayuda no me vendría nada mal.
Mi correo es: al095706@alumail.uji.es
Muchas gracias.

ccessaro

27/3/2017
Error en xajax - Call to a member function printJavascript() on a non-object in
Buenas tardes!
Estoy probando el ejercicio de validar país, con algunos cambios por que lo quiero para validar un campo de texto en el cual debo de colocar un número que es la cantidad que estoy solicitando o comprando, y quiero que lo compare con el campo en la base de datos MySQL en la tabla - producto - donde existe un campo llamado "stock" y no me deje colocar cantidad mayor al STOCK.
No he podido probar nada ya que al ejecutar me encuentro con este error --- Call to a member function printJavascript() on a non-object in --- ..dice que debo de crear el objeto, la verdad no se nada de javascript, necesito una guia o una explicacion de como hacerlo.
gracias