Validación de formulario con XAJAX

XAJAX es un framework desarrollado en PHP de código abierto que permite crear fácilmente aplicaciones Web que requieran de AJAX y sin necesidad de conocer JavaScript.

Esta entrada es para mostrarte un ejemplo del uso de la librería, un formulario en este caso que requiere de ciertas validaciones antes de ser procesado. Para entenderlo necesitas conocimientos básicos en PHP y CSS.

Si quieres ver como quedará nuestro formulario con validaciones XAJAX al final, haz clic aquí

Te recomiendo que leas la entrada de presentación de XAJAX, en ella encontraras un ejemplo básico del uso de la librería debidamente comentada.

Ya deberías haber descargado la librería y tenerla lista para usar, si no lo has hecho, sigue los siguientes pasos:

1.- descarga el zip desde la Web oficial.
2.- descomprime el zip en la carpeta del proyecto.
3.- cambia el nombre de la carpeta que se acaba de crear luego de la descompresión a "xajax"

La carpeta del proyecto no es mas que un directorio con el nombre "projectval_xajax" que tendremos en nuestro directorio Web, por ejemplo:
- suponiendo que nuestro directorio Web es "/var/www/" (recordar que ese directorio es el que asigna el servidor Web cuando lo instalamos), nos quedaría así --> /var/www/projectval_xajax.

Son varios los archivos que usaremos aparte de la librería, te dejo el cómo quedara el árbol de directorio al final.

projectval_xajax
--> xajax (directorio que contiene los archivos de la librería xajax)
--> imagenes (directorio que contiene las imágenes de nuestro proyecto de ejemplo)
--> index.php (archivo principal)
--> estilo.css (archivo con el estilo del proyecto)
--> modppal.php (archivo con las funciones principales)

Para éste ejemplo dispondremos de un formulario el cual necesita de una serie de validaciones antes de que los datos puedan ser procesados. Se han seleccionado las validaciones comunes, tales como:

Nombre y Apellido: este campo solo acepta letras de la A a la Z sea mayúscula o minúscula, espacios y guiones.
Cédula de Identidad: solo acepta números y está comprendido por una longitud que va de uno a ocho dígitos.
E-mail: la dirección de correo electrónico debe cumplir el formato: Id_cuenta [arroba] dominio [punto] algo.
Password: el password o contraseña debe ser mayor a cinco (5) caracteres y menor que veinticinco (25).
Confirmación de Email y Password: estos dos campos son solicitados nuevamente para asegurarnos de que el usuario no se equivoca al escribirlos anteriormente mientras se completa el formulario.

Ahora pasemos al código del ejemplo.

- Comencemos con el archivo que contiene el estilo de los campos y los elementos div, su nombre es "estilo.css" (recuerda que este va dentro de la capeta projectval_xajax).

Clic aquí para mostrar/ocultar el código

.DivGlobal
{
   text-align:center;
   margin: 2px;
   padding: 2px;
   border-top: 2px solid #f0c51b;
   border-bottom: 2px solid #f0c51b;
   color: red;
   font-size: 14px;
   background-color: #f9eec1;
}
.DivTable
{
   text-align:center;
   margin:auto;
   border:2px solid #000;
   width:700px;
   background-color: #edf3ff;
}
.DivLocal
{
   margin: auto;
   color: green;
   font-size: 12px;
} 
.Campos
{
   color: black;
   font-size: 12px;
   font-weight:bold;
}

No hay mucho que explicar, solo acotar que usaremos un elemento div para detallar los errores de manera global y otros que indicaran el campo exacto afectado.

Para incluir el estilo.css en el proyecto solo pega la siguiente linea entre la etiqueta <HEAD></HEAD> de nuestro index.php (el código de este archivo lo veremos mas adelante).

<link href="estilo.css" rel="stylesheet" />

- El siguiente archivo es el que contiene las funciones generales, cabe acotar que la decisión de usar funciones se toma cuando es necesario usar el mismo proceso una y otra vez, de esta manera se simplifica código y se reusa otro ;)

El nombre del archivo es "modppal.php" y las funciones son las siguientes:

Clic aquí para mostrar/ocultar el código

<?php

// valida Email
function NotIsEmail($sCadena)
{
   // primero validamos la longuitud de la direccion
   if ((strlen($sCadena) < 8) or (strlen($sCadena) > 100)) 
      return 'La dirección de <b>E-mail</b> debe tener mínimo ocho (8) caracteres 
y un máximo de cien (100)';
  else
  {
    return (!preg_match("/^[_a-zA-Z0-9-ñÑ]+(\\.[_a-zA-Z0-9-ñÑ]+)*@+([_a-zA-Z0-9-
]+\\.)*[a-zA-Z0-9-]{2,100}\\.[a-zA-Z]{2,6}$/",$sCadena) ? 
'El formato correcto del <b>E-mail</b> es Id[arroba]dominio[punto]algo, 
ej: camila_canaval@gmail.com' : false);
  }
}
 
// los campos Nombre y Apellido deben ser alfanbeticos y tener ciertas dimensiones
function NotIsCorrect($sCadena,$sCampo)
{
   if (!preg_match("/^[A-Za-z_ÑÁÉÍÓÚÄËÏÖÜñáéíóúäëïöü\'\s]*$/i",$sCadena))
      return "El campo <b>$sCampo</b> solo acepta caracteres alfanumericos, espacios, 
apóstrofe, diéresis, etc.";
   elseif ((strlen($sCadena) < 2) or (strlen($sCadena) > 40))
      return "El <b>$sCampo</b> debe estar formado por mas de una letra y 
ser menor o igual a cuarenta (40) caracteres";
   else
      return false;
}
 
// campo CI debe albergar solo numeros y tener cirtas dimensiones
function NotIsCI($CI)
{
   if (!ctype_digit($CI))
      return 'El campo <b>Cédula de Identidad</b> solo acepta números';
   elseif (substr($CI,0,1) == 0)
      return 'La <b>Cédula de Identidad</b> no puede comenzar por cero (0)';
   elseif (strlen($CI) > 8)
      return 'La <b>Cédula de Identidad</b> debe ser menor o igual a ocho (8)';
   else
      return false;
}
 
// el password debe tener minimo 6 y maximo 20 caracteres    
function NotIsPassword($sCadena)
{
   if (!ctype_alnum($sCadena))
      return 'Solo se permiten caracteres <b>alfa-numéricos</b> (letras/números) 
en el campo password';
   elseif ((strlen($sCadena) <= 5) or (strlen($sCadena) > 25))
      return 'El campo Password debe ser mayor a seis (5) caracteres y 
ser menor o igual a veinticinco (25) caracteres';
   else
      return false;
}
 
// se compara el campo de confirmacion
function NotIsEqua($sValCampo1,$sValCampo2,$sCampoName)
{
   return ($sValCampo1 != $sValCampo2) ? 
   "El segundo <b>$sCampoName</b> introducido no coincide con el primero 
Respete las letras mayusculas y minusculas" : false;
}
?>

Explicare que hace cada función:

NotIsEmail(): recibe como parámetro una dirección de E-mail que se compara luego haciendo uso de expresiones regulares para descartar caracteres no válidos.

NotIsCorrect(): recibe como parámetro la cadena a validar y el nombre del campo al cual pertenece, a parte de restringir la longitud del nombre o apellido, se usan tambien expresiones regulares para exigir que solo se usen caracteres alfabéticos, guiones y espacios.

NotIsCI(): la cédula de identidad es un código único compuesto por una cadena de números con longitud de 1 a 8. El número de CI. no puede ser o comenzar por cero (0). Se hace uso de la función ctype_digit para restringir a dígitos la cadena a tratar.

NotIsPassword(): se valida solo la longitud del password el cual debe estar entre 6 y 25 caracteres (recordar que esto es un ejemplo y que el limite lo colocas tú).

NotIsEqua(): recibe como parámetro tres argumentos y dos de ellas son cadenas la cual compara, si son iguales devuelve false, si son diferentes devuelve true.

- Se ha preferido que cada función devuelva un mensaje de advertencia si los datos son incorrectos y false si es lo contrario.

- Es como cuando te preguntan ¿la mesa es cuadrada? tu respondes SI afirmando que SI lo es.
- Si te preguntaran ¿La mesa NO es cuadrada? si respondes SI estas afirmando que NO es cuadrada.

El siguiente archivo es quien contiene lo mas interesante para este caso, la interacción con el objeto XAJAX. El archivo se llama "index.php" y el código es el siguiente:

1.- Lo primero es incluir la clase XAJAX y el archivo que contiene las funciones generales:

// incluimos la clase
require_once("xajax/xajax_core/xajax.inc.php");

// Incluimos las funciones generales
require_once("modppal.php");

2.- Creamos una instancia al objeto XAJAX:

$xajax = new xajax();

3.- Creamos las funciones que asociaremos con el objeto, para el ejemplo se han creado dos, una que gestiona el formulario (validando y mostrando los mensajes de error según sea el caso) y otro que se encarga de procesarlo (verificar que todo va bien y almacenar los supuestos datos):

Comenzaremos con la función FormManage:

Clic aquí para mostrar/ocultar el código

// valida el campo pasado por parametro
function FormManage($form,$sCampo)
{
   $sCadena = $form["txt$sCampo"];
   $sCampo2 = (strpos($sCampo,'2') ? substr($sCampo,0,(strlen(trim($sCampo))-1)) : '');
 
   // iniciamos el llamado a las validaciones segun sea el caso
   if (empty($sCadena))
      $sMsjGlobal = 'El campo <b>'. (!empty($sCampo2) ? "Confirme $sCampo2" : $sCampo) .
         '</b> es obligatorio, no puede dejarlo en blanco.';
   else
   {
      if ($sCampo == 'Nombres' || $sCampo == 'Apellidos')
         $sMsjGlobal = NotIsCorrect($sCadena,$sCampo);
      elseif ($sCampo == 'CI')
         $sMsjGlobal = NotIsCI($sCadena);
      elseif ($sCampo == 'Email')
         $sMsjGlobal = NotIsEmail($sCadena);
      elseif ($sCampo == 'Password')
         $sMsjGlobal = NotIsPassword($sCadena);
      elseif (!empty($sCampo2))
         $sMsjGlobal = NotIsEqua($sCadena,$form["txt$sCampo2"],$sCampo2);
   }
 
   // asignamos el valor que determinara la imagen y el mensaje a mostrar por campo
   $sImg = (!(!$sMsjGlobal) ? 'incorrecto' : 'correcto');
 
   // asignamos el codigo html para los mensajes
   $sHTMLMsjLocal  = "<div class='DivLocal'><img border='0'
src='imagenes/$sImg.png' /> valor $sImg</div>";
   $sHTMLMsjGlobal = "<div class='DivGlobal'><img border='0'
src='imagenes/warning.png' /> $sMsjGlobal</div>";
 
   // creamos una nueva instancia para generar la respuesta con ajax (xajaxResponse).
   $objRespuesta = new xajaxResponse();
    
   // Actualizamos los div
   $objRespuesta -> assign("div$sCampo",'innerHTML', $sHTMLMsjLocal);
   $objRespuesta -> assign('DivGlobal','innerHTML',
(!(!$sMsjGlobal) ? $sHTMLMsjGlobal : ''));

   // retornamos el objeto
   return $objRespuesta;
}

Esta función recibe como parámetro un array con los valores de los campos y el nombre del campo exacto a validar, puede ser llamada con cualquier evento (se explica mas adelante).

- Lo primero que hace es capturar el valor del campo y luego verificar si es un campo de confirmación.
- Luego se hace el llamado a las funciones que van a validar cada campo según sea el caso.
- En la variable "$sMsjGlobal" vamos almacenando el retorno de las funciones, si esa variable tiene como valor "false" se le asigna a la variable "$sImg" el valor "correcto", en caso contrario se asigna "incorrecto".
- Se arma el contenido que ira a los elementos Div.
- Se crea una nueva instancia para generar la respuesta con Ajax.

Nota:

Método Assign: este método funciona igual que si aplicaras en JavaScript: "document.getElementById('id_elemento').innerHTML = "cadena de caracteres";"

assign() recibe tres parámetros:
a- Id del elemento.
b- propiedad a usar, ejemplo: innerHTML, value, style.display, etc.
c- el valor que se asignará a el objeto dueño del Id.

Ejemplo: $objRespuesta -> assign( 'Id_lemento', 'innerHTML' , 'cadena de caracteres' );

- Asignamos a los elementos div los valores que corresponda, notar que al divGlobal se le asigna el valor de la variable mensaje global si esta contiene un valor diferente de false, de lo contrario se asigna nada.

$objRespuesta -> assign("div$sCampo",'innerHTML', $sHTMLMsjLocal);
$objRespuesta -> assign('DivGlobal','innerHTML',
(!(!$sMsjGlobal) ? $sHTMLMsjGlobal : ''));

- Por ultimo se retorna el objeto

return $objRespuesta;

La segunda función es FormProcess.

Clic aquí para mostrar/ocultar el código

function FormProcess($form)
{
   // creamos una nueva instancia para generar la respuesta con ajax
   $objRespuesta = new xajaxResponse();
 
   // si los campos estan correctos 
   if 
   ( 
       NotIsCorrect($form['txtNombres'],'Nombres') != false ||
        NotIsCorrect($form['txtApellidos'],'Apellidos') != false ||
        NotIsCI($form['txtCI']) != false ||
        NotIsEmail($form['txtEmail']) != false ||
        NotIsPassword($form['txtPassword']) != false ||
        NotIsEqua($form['txtEmail'],$form['txtEmail2'],'E-mal') != false ||
        NotIsEqua($form['txtPassword'],$form['txtPassword2'],'Password') != false
   )
      $objRespuesta -> alert('¡El formulario debe estar perfectamente validado!');
  else
  {
    /* 
         aqui iria el proceso que almacena los datos en la Base de Datos,
         recuerda que los datos deben de ser filtrados por seguridad
         script ...
         script ....
         script .....
    */
 
    /* luego de que has hecho lo debido con los datos,
         informamos al usuario del resultado
         podemos hacerlo usando un DIV o bien, un alert de JavaScript
    */
    $objRespuesta -> alert('¡Datos almacenados correctamente!');
 
    // limpiamos los campos
  $ArrayCampos = array('Nombres','Apellidos','CI','Email','Email2','Password','Password2');
    for ($i=0; $i<7; $i++)
    {
       $objRespuesta
          -> clear("txt$ArrayCampos[$i]",'value')      //limpiando los txt
          -> clear("div$ArrayCampos[$i]",'innerHTML'); //limpiando los div  
    }
  }
  return $objRespuesta;
}

En ella se recibe como argumento un arreglo con los valores de los campos.
- Luego de crear la instancia para generar la respuesta con xajax, se valida cada cambio llamando a las funciones correspondientes.
- Si hay algún campo sin validar se muestra un mensaje usando el método alert, de lo contrario ya se pueden almacenar datos, sea en una DB, archivo plano, etc.
- Se muestra un mensaje informando al usuario de que todo se ha realizado satisfactoriamente.
- Se limpian los campos: se ha usado el método clear para ello.

Nota:

Método Clear: permite limpiar determinado elemento, recibe como argumento:
a- Id del elemento a limpiar.
b- propiedad involucrada.

Ejemplo: $objRespuesta -> clear( 'Id_elemento' , 'value');

Para este caso como son varios campos se ha decidido usar un ciclo/bucle for y el llamado al método se hace uno detrás del otro:

$objRespuesta 
  -> clear( 'txt'.$ArrayCampos[$i] , 'value')
  -> clear( 'div'.$ArrayCampos[$i] , 'innerHTML');

Lo que es igual a:

$objRespuesta -> clear( 'txt'.$ArrayCampos[$i] , 'value');
$objRespuesta -> clear( 'div'.$ArrayCampos[$i] , 'innerHTML');

4.- Una vez has desarrollado las funciones a usar con el objeto XAJAX, hay que registrarlas:

$xajax -> registerFunction('FormManage'); // gestiona las validaciones del formulario
$xajax -> registerFunction('FormProcess'); // procesa los datos del formulario

5.- Le indicamos al objeto xajax que procese la peticion / el pedido

$xajax -> processRequest();

6.- Entre las etiquetas HEAD en el código HTML se agrega la linea

$xajax -> printJavascript("xajax/");

De esa manera se le dice que Incluya el JavaScript generado desde XAJAX

7.- Por ultimo solo nos queda llamar a las funciones FormManage y FormProcess haciendo uso de cualquier evento, en este caso onKeyUp y onSubmit:

onkeyup  = "xajax_FormManage(xajax.getFormValues('form1'),'nombre_del_campo_a_validar')"

onsubmit = "xajax_FormProcess(xajax.getFormValues('form1'))"

- Antes del nombre de la función se debe agregar el sufijo "xajax_".

xajax_getFormValues('id_del_formulario'))

getFormValues: este método recibe el identificador/Id del formulario del cual se desea obtener los datos y devuelve un arreglo con los datos de dicho form.

Como podrás notar, FormManage nos pide dos argumentos, el array del formulario y el nombre del campo a validar, mientras que FormProcess solo el arreglo .

8.- El resto es el código HTML, un form, campos y Div necesarios:
Código del index.php (completo).

Clic aquí para mostrar/ocultar el código

<?php

// incluimos la clase
require_once("xajax/xajax_core/xajax.inc.php");
 
// Incluimos las funciones generales
require_once("modppal.php");

// Creamos una instancia al objeto XAJAX:
$xajax = new xajax();

// valida el campo pasado por parametro
function FormManage($form,$sCampo)
{
   $sCadena = $form["txt$sCampo"];
   $sCampo2 = (strpos($sCampo,'2') ? substr($sCampo,0,(strlen(trim($sCampo))-1)) : '');
 
   // iniciamos el llamado a las validaciones segun sea el caso
   if (empty($sCadena))
      $sMsjGlobal = 'El campo <b>'. (!empty($sCampo2) ? "Confirme $sCampo2" : $sCampo) .
         '</b> es obligatorio, no puede dejarlo en blanco.';
   else
   {
      if ($sCampo == 'Nombres' || $sCampo == 'Apellidos')
         $sMsjGlobal = NotIsCorrect($sCadena,$sCampo);
      elseif ($sCampo == 'CI')
         $sMsjGlobal = NotIsCI($sCadena);
      elseif ($sCampo == 'Email')
         $sMsjGlobal = NotIsEmail($sCadena);
      elseif ($sCampo == 'Password')
         $sMsjGlobal = NotIsPassword($sCadena);
      elseif (!empty($sCampo2))
         $sMsjGlobal = NotIsEqua($sCadena,$form["txt$sCampo2"],$sCampo2);
   }
 
   // asignamos el valor que determinara la imagen y el mensaje a mostrar por campo
   $sImg = (!(!$sMsjGlobal) ? 'incorrecto' : 'correcto');
 
   // asignamos el codigo html para los mensajes
   $sHTMLMsjLocal  = "<div class='DivLocal'><img border='0'
src='imagenes/$sImg.png' /> valor $sImg</div>";
   $sHTMLMsjGlobal = "<div class='DivGlobal'><img border='0'
src='imagenes/warning.png' /> $sMsjGlobal</div>";
 
   // creamos una nueva instancia para generar la respuesta con ajax (xajaxResponse).
   $objRespuesta = new xajaxResponse();
    
   // Actualizamos los div
   $objRespuesta -> assign("div$sCampo",'innerHTML', $sHTMLMsjLocal);
   $objRespuesta -> assign('DivGlobal','innerHTML',
(!(!$sMsjGlobal) ? $sHTMLMsjGlobal : ''));

   // retornamos el objeto
   return $objRespuesta;
}

function FormProcess($form)
{
   // creamos una nueva instancia para generar la respuesta con ajax
   $objRespuesta = new xajaxResponse();
 
   // si los campos estan correctos 
   if 
   ( 
       NotIsCorrect($form['txtNombres'],'Nombres') != false ||
        NotIsCorrect($form['txtApellidos'],'Apellidos') != false ||
        NotIsCI($form['txtCI']) != false ||
        NotIsEmail($form['txtEmail']) != false ||
        NotIsPassword($form['txtPassword']) != false ||
        NotIsEqua($form['txtEmail'],$form['txtEmail2'],'E-mal') != false ||
        NotIsEqua($form['txtPassword'],$form['txtPassword2'],'Password') != false
   )
      $objRespuesta -> alert('¡El formulario debe estar perfectamente validado!');
   else
   {
      /* 
         aqui iria el proceso que almacena los datos en la Base de Datos,
         recuerda que los datos deben de ser filtrados por seguridad
         script ...
         script ....
         script .....
      */
 
      /* luego de que has hecho lo debido con los datos,
         informamos al usuario del resultado
         podemos hacerlo usando un DIV o bien, un alert de JavaScript
      */
      $objRespuesta -> alert('¡Datos almacenados correctamente!');
 
      // limpiamos los campos
      $ArrayCampos = 
      array('Nombres','Apellidos','CI','Email','Email2','Password','Password2'); 
      for ($i=0; $i<7; $i++)
      {
         $objRespuesta
            -> clear("txt$ArrayCampos[$i]",'value')      //limpiando los txt
            -> clear("div$ArrayCampos[$i]",'innerHTML'); //limpiando los div  
      }
   }
   return $objRespuesta;
}

$xajax -> registerFunction('FormManage');  // gestiona las validaciones del formulario
$xajax -> registerFunction('FormProcess'); // procesa los datos del formulario

//Le indicamos al objeto xajax que procese la peticion / el pedido
$xajax -> processRequest();
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
   <title>Validaciones con XAJAX</title>
   <link href="estilo.css" rel="stylesheet" />
   <?php 
     //se le dice que Incluya el JavaScript generado desde XAJAX
     $xajax -> printJavascript('xajax/'); 
   ?>
</head>
<body onload="document.getElementById('txtNombres').focus();">
   <form name='form1' id='form1' action='javascript:void(null);' 
   onsubmit="xajax_FormProcess(xajax.getFormValues('form1'))">
   <div class='DivTable'>
   <table border='0'>
      <tr><td colspan='3'><div id='DivGlobal'></div><hr/></td></tr>
      <tr>
         <td align='right' width='220px' class='Campos'>Nombres:</td>
         <td width='200px'>
            <input tabindex='1' type='text' id='txtNombres' name='txtNombres' size='30'
 maxlength='40' onkeyup="xajax_FormManage(xajax.getFormValues('form1'),'Nombres')" />
         </td>
         <td align='left' width='300px'><div id='divNombres'></div></td>
      </tr>
      <tr>
         <td align='right' class='Campos'>Apellidos:</td>
         <td align='left'>
            <input tabindex='2' type='text' id='txtApellidos' name='txtApellidos' size='30' 
maxlength='40'onkeyup="xajax_FormManage(xajax.getFormValues('form1'),'Apellidos')" />
         </td>
         <td><div id='divApellidos'></div></td>
      </tr>
      <tr>
         <td align='right' width='220px' class='Campos'>C&eacute;dula de Identidad:</td>
         <td>
            <input tabindex='3' type='text' id='txtCI' name='txtCI' size='10' 
maxlength='8' onkeyup="xajax_FormManage(xajax.getFormValues('form1'),'CI')" />
         </td>
         <td align='left' width='300px'><div id='divCI'></div></td>
      </tr>
      <tr>
         <td align='right' class='Campos'>E-mail:</td>
         <td align='left'>
            <input tabindex='4' type=text' id='txtEmail' name='txtEmail' size='30' 
maxlength='100' onkeyup="xajax_FormManage(xajax.getFormValues('form1'),'Email')" />
         </td>
         <td><div id='divEmail'></div></td>
      </tr>
      <tr>
         <td align='right' class='Campos'>Confirme Email:</td>
         <td align='left'>
            <input tabindex='5' type='text' id='txtEmail2' name='txtEmail2' size='30' 
maxlength='100' onkeyup="xajax_FormManage(xajax.getFormValues('form1'),'Email2')" />
         </td>
         <td><div id='divEmail2'></div></td>
      </tr>
      <tr>
         <td align='right' width='220px' class='Campos'>Password:</td>
         <td width='200px'>
            <input tabindex='6' type='password' id='txtPassword' name='txtPassword' 
size='25' maxlength='25' 
onkeyup="xajax_FormManage(xajax.getFormValues('form1'),'Password')" />
         </td>
         <td align='left' width='300px'><div id='divPassword'></div></td>
      </tr>
      <tr>
         <td align='right' class='Campos'>Confirme Password:</td>
         <td align='left'>
            <input tabindex='7' type='password' id='txtPassword2' name='txtPassword2' 
size='25' maxlength='25' 
onkeyup="xajax_FormManage(xajax.getFormValues('form1'),'Password2')" />
         </td>
         <td><div id='divPassword2'></div></td>
      </tr>
      <tr><td align='center' colspan='3'><hr/><input type='submit' tabindex='8' 
value='Guardar los datos'></td></tr>
   </table>
   </div>
   <br/><div style='text-align:center;'><img border='0' src='imagenes/xajax_powered.png' /></div>
   </form>
</body>
</html>

nota:

Versión usada en el ejemplo xajax 0.5 standard

Descargas y ejemplos
Descargar XAJAX desde la Web oficial
Ver ejemplo del script
Descargar todos los archivos del proyecto (incluye la librería y las imagenes)

Publicar un comentario

14Comentarios

- Los comentarios están siendo moderados y serán publicados en la brevedad posible.

Pepe21/10/11, 20:46
Y donde añadimos nuestro email?
ResponderEliminar
Respuestas
Reinaldo IC.22/10/11, 0:31
no entiendo bien la pregunta, éste ejemplo es de un formularío de registro (para mostrar como hacer las validaciones), si luego quieres almacenar el Email y los demás campos validados, solo debes crear tu base de datos y enviar toda la información.
ResponderEliminar
Respuestas
JRT13/1/12, 19:13
Hola que tal excelente tutorial, soy nuevo en el mundo de ajax y me gustaría saber si podrías poner un ejemplo de como hacer la conexión a la base de datos que no se como colocarla donde ponen el comentario..

De antemano gracias...
ResponderEliminar
Respuestas
JRT13/1/12, 19:16
Excelente tutorial pero tengo la duda de como hacer la conexión a la base de datos si podrian hacer un ejemplo lo agradecería, de antemano gracias
ResponderEliminar
Respuestas
Reinaldo IC.21/1/12, 6:18
te dejo un ejemplo. saludos!
ResponderEliminar
Respuestas
catpaw25/1/12, 2:12
Me sale un error, descomprimi el rar projectval_xajax en mi servidor www y lo abro en el navegador y me salen estos errores:

Deprecated: Assigning the return value of new by reference is deprecated in C:\wamp\www\projectval_xajax\xajax\xajax_core\xajax.inc.php on line 360

y en la linea 1305

a que se debe?
ResponderEliminar
Respuestas
Reinaldo IC.25/1/12, 4:03
catpaw, ese mensaje aparece porque la librería (XAJAX) debe estar usando funciones obsoletas para la versión de PHP que usas, si no quieres que aparezca solo debes editar tu php.ini y donde sale error_reporting, lo dejas así:
error_reporting = E_ALL & ~E_NOTICE & ~E_DEPRECATED
ResponderEliminar
Respuestas
catpaw27/1/12, 0:40
ok gracias checare la informacion
ResponderEliminar
Respuestas
Unknown29/1/12, 23:30
Muy buen tema me funciono y todo, ahora quiero que me expliques o no se si ya tengas un tema donde este este codigo e inserte en una base de datos los datos que se escribieron. gracias
ResponderEliminar
Respuestas
Reinaldo IC.30/1/12, 0:13
Juan, el almacenamiento en la base de datos se hace igual que con cualquier script que no use XAJAX.. ya hay un tema que muestra el ejemplo de interacción con la DB:

http://cassianinet.blogspot.com/2012/01/sistema-de-comentarios-xajax-mysql-css.html

saludos!
ResponderEliminar
Respuestas
acv221/2/12, 19:53
una pregunta como haria para validar un combo select con el xajax
ResponderEliminar
Respuestas
Reinaldo IC.26/2/12, 13:34
aquí tienes un ejemplo:
http://cassianinet.blogspot.com/2012/02/xajax-validando-select.html

saludos
ResponderEliminar
Respuestas
Anónimo21/3/12, 16:03
hola y primero que todo, gracias por el excelente tutorial.
creo que llego tarde, ahora se ha actualizado el xajax y pues luego de crear el sitio en mi localhost para probar las validaciones el formulario el error que me salta es "Fatal error: Call to undefined method xajax::registerFunction() in C:\wamp\www\proyectval\index.php on line 103", no se que deberia hacer, no conozco nada de xajax, si me das una mano lo podre arreglar, gracias nuevamente.
ResponderEliminar
Respuestas
Reinaldo IC.21/3/12, 21:28
Hola lobotecario, la versión usada en el ejemplo es "xajax 0.5 standard", en la 0.6, el método "registerFunction" fue eliminado y en su lugar se usa "register", ejemplo:
$xajax->register(XAJAX_FUNCTION,'FormManage');
$xajax->register(XAJAX_FUNCTION,'FormProcess');

lo recomendable es que continuen usando la versión 0.5, ya que la 0.6 a la fecha de hoy, sigue siendo beta y es susceptible a cambios.
saludos!
ResponderEliminar
Respuestas

Añadir comentario

Validación de formulario con XAJAX - [AJAX + PHP]

Entradas relacionadas:

Publicar un comentario

PHP y los archivos dBase (dbf)

Sobre el autor

Contact form