Ver Mensaje Individual
  #11 (permalink)  
Antiguo 05/11/2013, 09:27
Avatar de marlanga
marlanga
 
Fecha de Ingreso: enero-2011
Ubicación: Murcia
Mensajes: 1.024
Antigüedad: 13 años, 9 meses
Puntos: 206
Respuesta: actualizar DOM luego de usar AJAX

La validación es para hacerla con javascript antes de enviar el formulario al servidor.
De forma muy simple éste es el esqueleto y la forma de usarla:
http://jsfiddle.net/3WWgW/2/

Librería:
Código Javascript:
Ver original
  1. function JsValidator(form){
  2.     this.form=form;
  3.     this.validar=function(){
  4.         var n=this.form.elements.length;
  5.         for (var i=0;i<n;i++)
  6.         {
  7.             var elemento=this.form.elements[i];
  8.             if (elemento.hasAttribute("regexp"))
  9.             {
  10.                 var regExp = new RegExp(elemento.getAttribute("regexp"));
  11.                 var txtError=(elemento.hasAttribute("error"))?elemento.getAttribute("error"):"";
  12.                 if (!regExp.test(elemento.value))
  13.                 {
  14.                     return { valido:false, texto: txtError };
  15.                 }
  16.             }
  17.         }
  18.         return { valido:true };
  19.     }
  20. }

Código HTML:
Ver original
  1. <form id="form1" method="get" action="http://www.marca.com">
  2.     Email: <input type="text" name="email" regexp="^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$" error="El email no es correcto." /><br/>
  3.     Nick: <input type="text" name="nick" regexp="^.+$" error="El nick es obligatorio" /><br/>
  4.     Pais: <input type="text" name="pais" /><br/>
  5.     <input type="submit" valure="enviar" />
  6. </form>

Javascript para la página donde está el form:
Código Javascript:
Ver original
  1. window.onload=function(){
  2.     var form=document.getElementById("form1");
  3.     var validador=new JsValidator(form);
  4.     form.onsubmit=function(){
  5.         var respuesta=validador.validar();
  6.         if (!respuesta.valido)
  7.         {
  8.             alert(respuesta.texto);
  9.             return false;
  10.         }
  11.         return true;
  12.     };
  13.    
  14. };

Este ejemplo está hecho en penas 10 minutos. Se puede mejorar la librería mucho, por ejemplo haciendo que el error aparezca en un div flotante encima del elemento que ha provocado el error. También es posible crear una colección de patrones regulares genéricos, como el patrón de EMAIL, el de cadena no vacía, el de campo numérico, el de formato de fechas válido, etc. Y en vez de usar el atributo regexp, crear otro atributo nuevo, que sirva para usar patrones regulares que ya están por defecto en esa colección de la librería de validación. Etc.

Última edición por marlanga; 05/11/2013 a las 09:34