Comunidad de diseño web y desarrollo en internet online

Comprobar Formularios en Javascript Automaticamente

Citar            
MensajeEscrito el 23 Dic 2006 03:42 pm
Saludos a todos.

Hastiado de tener que comprobar formularios campo por campo una y otra vez tanto en Javascript como en PHP, con la idea de un amigo cree este sencillo codigo que a traves de una funcion ( Validar(formulario) ) recorre todos los campos del formulario pasado por parametro, y si se comprobaron correctamente devuelve "true", caso contrario devuelve "false" y usando DOM imprime una lista ( <LI> ) con los errores, en el espacio indicado en el HTML:

Código :

<ul id="lista-errores"></ul>


La forma como el Javascript sabe cómo comprobar qué campo debe ser de un tipo o de otro, es por medio de prefijos de una (1) letra, que le coloco al nombre de cada campo, señalados a continuación:


i - id u oculto (hidden) (se ignora)
a - cadena alfanumerica (cualquier cosa)
t - solo texto
n - solo numeros positivos o cero
z - numeros positivos o negativos
q - reales positivos
r - reales positivos o negativos
e - email
w - wysiwyg


Si el prefijo está en minúscula quiere decir que es un campo opcional, caso contrario es obligatorio.

Me faltan agregar más tipos, pero creo que ya con esto les dejo la idea.

nota: tampoco he agregado la opción de radios y check button, dado que por ahora no la he necesito y como siempre, ando trabajando sobre la marcha.

Espero haberme explicado y que les guste y les sirva de algo este codigo.

Sugerencias, criticas, aportes, etc... Son bien recibidas.

Un saludo.

Por Duilio

Claber

2590 de clabLevel

25 tutoriales
1 articulo

Genero:Masculino   Premio_Secretos

Venezuela

firefox
Citar            
MensajeEscrito el 23 Dic 2006 06:01 pm
Ah siempre he estado buscando scripts como estos que trabajen directamente con el DOM sin tener que definir cada input a validar.

Y entre mi busqueda encontré muchos scripts similares, pero el que más se acomoda a mis necesidades ha sido éste. jQuery validator plugin.

Es un poco complejo de entender a la primera pero básicamente se agrega una clase a cada input para validacion class="$v(required)" si se necesitan varias validaciones se separan con comas class="$v(required,number)" y para separar parámetros de una validación como length no menor que 2 y no mayor que 8 se usan : class="$v(required,number,length:2:8)"

Es super sencillo, y puedes elegir entre usar un div contenedor que muestre los errores en una lista, o un label que se coloque después del input.

Saludos.

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Premio_Secretos Team Cristalab

Front-end Developer en Washington, DC

firefox
Citar            
MensajeEscrito el 23 Dic 2006 06:34 pm
A ver... Al mío todavía no le he colocado el label después del input, sólo el UL contenedor.

Y prefiero usar el prefijo en el nombre, dado que me parece más corto así y el nombre lo uso para re-comprobar con PHP que el campo se envió correctamente, tomando de $_POST['PREFIJOname']

lo de los maxlength lo tengo en alguna parte pero no se lo he sumado usando dicha funcion.

Gracias por la URL, siempre me gusta ver y cotejar los distintos códigos para tomar ideas, ver fallos, faltas, o ventajas....

Viste mi codigo?

Un saludo.

Por Duilio

Claber

2590 de clabLevel

25 tutoriales
1 articulo

Genero:Masculino   Premio_Secretos

Venezuela

firefox
Citar            
MensajeEscrito el 23 Dic 2006 06:45 pm
y la validación tan bonita se va al carajo una vez que javascript sea desactivado
por eso es mejor realizar la comprobación del lado del servidor y devolver los datos con ajax, así no hay error

Por fael

BOFH

2443 de clabLevel

3 tutoriales
2 articulos

 

firefox
Citar            
MensajeEscrito el 23 Dic 2006 06:51 pm
Se ve muy bien

Una idea que quizas mejoraría, es que ademas de mostrar el mensaje del error, se le pudiera agregar una clase al campo para resaltarlo de los demás.
Asi como lo que tengo en http://www.icad.com.ve/contacto/, aunque ahí lo hago con PHP, quizás seria mejor de esa forma.

Por Ramm

BOFH

3152 de clabLevel

6 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell REC Héroes

London, UK

firefox
Citar            
MensajeEscrito el 23 Dic 2006 07:56 pm
fael el lu$er: si javascript está desactivado, ajax funciona? de todas formas yo hago la misma validación pero con PHP. Es decir tengo doble capa de validación: cliente / servidor.

Gracias Ramm... Eso último lo había pensado tambien... no seria muy dificil

Código :

campo.setAttribute('class','campo error')


algo así.

Como comenté en la primera línea, creo que lo mejor es hacerlo para ambos, cliente / servidor, no?

Un saludo. Gracias por sus respuestas.

Por Duilio

Claber

2590 de clabLevel

25 tutoriales
1 articulo

Genero:Masculino   Premio_Secretos

Venezuela

firefox
Citar            
MensajeEscrito el 23 Dic 2006 11:45 pm

Duilio escribió:

si javascript está desactivado, ajax funciona?

evidentemente no. la idea es que si hay un error, el php es el que lo emite, no js

Duilio escribió:

de todas formas yo hago la misma validación pero con PHP. Es decir tengo doble capa de validación: cliente / servidor

doble trabajo, pero está bien, tú sabes.

Por fael

BOFH

2443 de clabLevel

3 tutoriales
2 articulos

 

firefox
Citar            
MensajeEscrito el 24 Dic 2006 12:56 am
en este caso no es doble trabajo porque ambos se hacen con codigos automaticos que toman los valores, en este caso, los mismos prefijos y las mismas funciones... esta era la idea...

Por Duilio

Claber

2590 de clabLevel

25 tutoriales
1 articulo

Genero:Masculino   Premio_Secretos

Venezuela

msie
Citar            
MensajeEscrito el 24 Dic 2006 02:30 pm

fael el lu$er escribió:

Duilio escribió:

de todas formas yo hago la misma validación pero con PHP. Es decir tengo doble capa de validación: cliente / servidor

doble trabajo, pero está bien, tú sabes.


De hecho eso es lo que pasa con trabajar con javascript o usar ajax, que se programa doble. Quizás la que menos haga falta sea la del cliente, pero la del servidor siempre se debe hacer. Lo de javascript es para no "sobrecargar" el servidor pero no se debe confiar en los datos validados por javascript.

Bueno eso es doble trabajo cuando el hemisferio derecho no hace el lado del cliente :roll:

Por Maikel

BOFH

5575 de clabLevel

22 tutoriales
5 articulos

Genero:Masculino   Team Cristalab

Claber de baja indefinida

firefox
Citar            
MensajeEscrito el 26 Dic 2006 03:19 pm
Vale. Aquí está, la clase "Norma" (en mi framework, cada clase tiene el nombre de una constelación... algo debo hacer para no aburrirme) y abajo, una función que implemente esta clase para validar. Tomando los mismos prefijos que mencioné anteriormente.

Con ello se pueden hacer ambas validaciones sin esfuerzo alguno...

Código :

<?php

  class Norma {
  
    function __construct(&$campo,&$valor) {
   
      $this->campo = $campo;
      $this->valor = trim($valor);
      $this->tipo = strtolower( $campo[0] );
      $this->error = false;
   
   }
   
   function esObligatorio() {

     $car = $this->campo[0];
     if ( !ereg('[A-Z]',$car) || ($car == 'W') ) return false;
     return true;
     
    }
   
    function vacio() {
   
     if ( $this->valor != '' ) return false;
     $this->error = 'Debe completar el campo "'.$this->formatoNombre().'"';
     return true;
     
    }
   
    function natural() {
   
     if( !ereg('[^0-9]',$this->valor) ) return true;
     $this->error = 'El campo "'.$this->formatoNombre().'" solo puede tener numeros enteros sin signo';
     return false;
    }
   
    function entero() {

     if( ereg('^-?[0-9]+$',$this->valor) ) return true;
     $this->error = 'El campo "'.$this->formatoNombre().'" solo puede tener numeros enteros';
     return false;
   
    }
   
    function realPositivo() {
   
     if( !ereg('[^0-9.]',$this->valor) ) return true;
     $this->error = 'El campo "'.$this->formatoNombre().'" solo puede tener numeros sin signo';                
     return false;
     
    }
   
    function numeroReal() {
   
     if( !ereg('[^0-9.-]',$this->valor) ) return true;
     $this->error = 'El campo "'.$this->formatoNombre().'" solo puede tener numeros';
     return false;
     
    }
   
    function soloTexto() {
   
     if( ereg('^[a-z A-Z]+$',$this->valor) ) return true;
     $this->error = 'El campo "'.$this->formatoNombre().'" solo puede tener texto';
     return false;
     
    }

    function correo() {
   
     if( ereg('(^[a-z][a-z0-9\-_.]+[@][a-z0-9\-_.]+[.][a-z]+$)',$this->valor) ) return true;
     $this->error = 'el campo "'.$this->formatoNombre().'" debe ser un correo valido';
     return false;
     
    } 
   
    function estaSeleccionado() {
   
     if ( ($this->valor != '0') && ($this->valor != '') ) return true;
     $this->error =  'debe eligir un valor del combo "'.$this->formatoNombre().'"';
     return false;
    }

    function formatoNombre() {
   
     return ucfirst( str_replace('_',' ', substr($this->campo,1) ) );
     
    }
   
}

?>



prefijos adicionales:
c - es para combos
p - para contraseñas
f - para archivos


Nota: se comprueba el campo "id" (que no puede faltar en ningun formulario) si id es igual a 0, quiere decir que se está agregando, sino que se está modificando (sólo uso un formulario para ambas cosas, cuestiones de pereza, supongo). Si se está modificando, archivos o contraseña son opcionales, aun cuando se hayan puesto como obligatorios.

Nota 2: aDatos es equivalente a POST


Código :


    function validar() {
   
     require_once(LIB.'norma.lib.php');

     $actualizar = $this->aDatos['id'];
     
      foreach($this->aDatos as $campo => $valor):
     
       $campo = new Norma($campo,$valor);
      
      switch( $campo->tipo ):
        case 'i': break;
        case 'c':
          if ( $campo->esObligatorio() ) $campo->estaSeleccionado();
        break;
        case 'f':
        case 'p':
          if ( !$actualizar && $campo->esObligatorio ) $campo->vacio();
        break;
        default:
          if ( !( $campo->esObligatorio() && $campo->vacio() ) )
            switch ( $campo->tipo ):
              case 't': $campo->soloTexto(); break;
              case 'n': $campo->natural(); break;
              case 'z': $campo->entero(); break;
              case 'q': $campo->realPositivo(); break;
              case 'r': $campo->numeroReal(); break;
              case 'e': $campo->correo(); break;
            endswitch;
        endswitch;
      
      if ( $campo->error ) $this->errores .= "<li>$campo->error</li>\n";
      
      endforeach;
     
     return ( $this->errores == '' ? true : false );
     
    }

     
  }



cualquier acotación la recibo con gusto. Un saludo :)

Por Duilio

Claber

2590 de clabLevel

25 tutoriales
1 articulo

Genero:Masculino   Premio_Secretos

Venezuela

firefox
Citar            
MensajeEscrito el 26 Dic 2006 08:38 pm
Para siempre se debe validar en el lado del clienta y el servidor, por un enorme número de razones, entre ellas una muy importante, la experiencia del usuario.

Duilio, tiene buena pinta, el fin de semana, espero poder darme un tiempo para verlo. Por lo pronto te paso el prototipo(la versión final no la tengo a la mano, pero si mejoro mucho aún) de uno de los componentes que tengo en JS/DOM(a ver si ves algo que te pueda servir para completar tu validador). Te resumo que hace, en un textarea le agregas la propiedad fp_key, eso lo que hace es que cuando el textarea este activo, se visualiza un boton en la parte superior derecha del TA, ese botón YO lo use para integrar un sistema de autocompletado de texto, pero bien puede servir para validar ortografía, agregar palabras de un diccionario, etc...

Código :

<html>
<head>
   <title>Test</title>
   <style>
      .fp_btn{
         font-family: Verdana, Arial;
         background-color: #51708F;
         border: 1px solid #042342;
         visibility: hidden;
         color: #FFFFFF;
         font-size: 10px;
         text-align: center;
         position: absolute;
         cursor: pointer;
      }
   </style>
   <script>
      verFormatoPred = function(value){
         alert(value);
      }
      var fp_onclick = verFormatoPred;
      var fp_currentBtn;
      fp_ini = function()
      {
         var all_textarea;
         var Total, i;
         var _htmlElement;
         all_textarea = document.getElementsByTagName("textarea");
         Total = all_textarea.length;
         for(i=0; i<Total; i++)
         {
            _htmlElement = all_textarea[i];
            if(_htmlElement.attributes['fp_key'])
            {
               fp_add_button(_htmlElement);
               _htmlElement.onfocus = function()
               {
                  fp_setFocusBtn(document.getElementById(this.id +'_btn'));
               }

            }
         }
      }
      fp_add_button = function (target)
      {
         newDiv = document.createElement("div");
         newDiv.id = target.id+"_btn";
         newDiv.fp_key = target.attributes['fp_key'].value;
         newDiv.className = "fp_btn";
         newDiv.style.width = "80px";
         newDiv.style.height = "15px";
         newDiv.style.position = "absolute";
         newDiv.style.left = fp_calcPosition(target, "Left") + fp_getElementDimension(target).width - (parseInt(newDiv.style.width)+1);
         newDiv.style.top = fp_calcPosition(target, "Top")-(parseInt(newDiv.style.height)+1);
         newDiv.innerHTML = "Auto texto";
         newDiv.onclick = function(){
            if(this.attributes['fp_key'])
               fp_onclick(this.attributes['fp_key'].value);
         }
         target.parentNode.appendChild(newDiv);
      }
      fp_setFocusBtn = function(target){
         if(fp_currentBtn)
         {
            fp_currentBtn.style.visibility = "hidden";
         }
         fp_currentBtn = target;
         fp_currentBtn.style.visibility = "visible";
      }
      fp_calcPosition = function(elt, dir)
      {
           var tmpElt = elt;
         if(elt.style.position == "absolute") 
         {
            dir = dir.toLowerCase();
            pos = parseInt(elt.style[dir]);
         }
         else
         {
              var pos = parseInt(tmpElt["offset" + dir]);
              while(tmpElt.tagName != "BODY") 
            {
                  tmpElt = tmpElt.offsetParent;
                  pos += parseInt(tmpElt["offset" + dir]);
              }
         }
           return pos;
      }
      fp_getElementDimension = function(elt) 
      {
         var dim = new Object();
         dim.width = elt.offsetWidth;
         dim.height = elt.offsetHeight;
         return dim;
      }    
   </script>
</head>
<body onload="fp_ini();" style="margin: 20px;">
   <textarea id="Testing2" fp_key="1" style="position:absolute; top:300px; left:200px;"></textarea>
   <textarea id="Testing" fp_key="32"></textarea>
</body>
</html>



Bueno eso es doble trabajo cuando el hemisferio derecho no hace el lado del cliente
:lol:

Por Dano

BOFH

4273 de clabLevel

14 tutoriales
4 articulos
10 ejemplos

Genero:Masculino   Bastard Operators From Hell Premio_Secretos

Lugar estratégico para vigilarte

firefox
Citar            
MensajeEscrito el 27 Dic 2006 01:22 pm
Copiado...

Gracias Dano, le daré un vistazo apenas pueda...

Hoy sigo jugando con las plantillas :)

Por Duilio

Claber

2590 de clabLevel

25 tutoriales
1 articulo

Genero:Masculino   Premio_Secretos

Venezuela

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.