XAJAX: validando select

Al momento de hacer las validaciones de un sistema se puede abordar de diferentes formas, acv2 preguntaba cómo hacer las validaciones de un elemento select con XAJAX (AJAX+PHP) y, basandonos en el post base, nos queda éste ejemplo, donde validamos un select simple y uno de tipo multiple:

index.php
<?php

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

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

function no_valido_select($sValor){

    // validamos en primer lugar, 
    // que se haya seleccionado una opcion
    if(empty($sValor)) return '* Debe seleccionar una opción..';
    
    # aqui cualquier otra validacion
    # ...

    // retorna FALSE si los datos estan perfectamente validados
    return FALSE;
}

function no_valido_multi_select($arrItems){

    // validamos en primer lugar, 
    // que se haya seleccionado una opcion
    if(!is_array($arrItems) or count($arrItems)<2 or empty($arrItems[0])){
        return '* Debe seleccionar al menos dos opciones sin incluir la primera..';
    }

    # aqui cualquier otra validacion
    # ...

    // retorna FALSE si los datos estan perfectamente validados
    return FALSE;
}

// valida el campo pasado por parametro
function FormManage($form,$sCampo){

   $sCadena = $form["sel$sCampo"];

   $sMsj = '';
   // iniciamos el llamado a las validaciones segun sea el caso
   if (($sCampo=='Ciudades' and $sTempMsj=no_valido_select($sCadena)) 
       
or ($sCampo=='MultipleCiudades' and $sTempMsj=no_valido_multi_select($sCadena))){

      $sMsj = $sTempMsj;// actualizamos
   }

   // creamos una nueva instancia para generar la respuesta con ajax (xajaxResponse).
   $objRespuesta = new xajaxResponse();

   // asignamos el valor que determinara la imagen y el mensaje a mostrar por campo
   $sImg = (!empty($sMsj) ? 'incorrecto' : 'correcto');

   // asignamos el codigo html para los mensajes
   $sHTMLMsj  = "<div class='DivLocal'><img border='0'
    src='imagenes/$sImg.png' /> valor $sImg</div>";
    
   $sHTMLMsjGlobal = "<div class='DivGlobal'><img border='0'
    src='imagenes/warning.png' /> $sMsj</div>";

   // Actualizamos los div
   $objRespuesta->assign("div$sCampo",'innerHTML', $sHTMLMsj);
   $objRespuesta->assign('DivGlobal','innerHTML', 
    (!(!$sMsj) ? $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(no_valido_select($form['selCiudades']) 
or no_valido_multi_select($form['selMultipleCiudades']))

      $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('Ciudades','MultipleCiudades'); 
      //$NumCampos = count($ArrayCampos);     
      for ($i=0; $i<2; $i++)//no hace falta usar count puesto que sabemos cuantos campos con..
      {
         $objRespuesta
           ->clear("sel$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();
?>
<html>
<head>
   <title>Validando select's 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>
   <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'>Ciudades:</td>
         <td width='200px'>
            <select name="selCiudades"  id="selCiudades" 
            onChange="xajax_FormManage(xajax.getFormValues('form1'),'Ciudades')">
          <option value="">-- seleccione una ciudad--</option>
        <option value="1">Barcelona</option>
        <option value="2">Barquisimeto</option>
        <option value="3">Caracas</option>
        <option value="4">Maracaibo</option>
        <option value="5">Los teques</option>
        <option value="6">Valencia</option>
        </select>
         </td>
         <td align='left' width='300px'><div id='divCiudades'></div></td>
      </tr>
      <tr>
         <td align='right' width='220px' class='Campos'>Multiple Ciudades:</td>
         <td width='200px'>
            <select name="selMultipleCiudades[]" id="selMultipleCiudades" multiple="multiple" 
        onChange="xajax_FormManage(xajax.getFormValues('form1'),'MultipleCiudades')">
          <option value="">-- seleccione varias ciudades--</option>
        <option value="1">Barcelona</option>
        <option value="2">Barquisimeto</option>
        <option value="3">Caracas</option>
        <option value="4">Maracaibo</option>
        <option value="5">Los teques</option>
        <option value="6">Valencia</option>
        </select>
         </td>
         <td align='left' width='300px'><div id='divMultipleCiudades'></div></td>
      </tr>
      <tr>
    <td align='center' colspan='3'><hr/>
    <input type='submit' tabindex='8' value='Guardar los datos'></td>
      </tr>
   </table>
   </div>
   </form>
</body>
</html>
Los estilos y demás archivos requeridos, son los mismos usados en el primer ejemplo (base)
XAJAX: validando select

Entradas relacionadas:

Publicar un comentario

PHP y los archivos dBase (dbf)

Sobre el autor

Contact form
