Entradas con la etiqueta ‘validacion de furmuario’

Validar Formularios con CSS3 y HTM5

Jueves, 23 de Mayo de 2013

Hoy ponemos un enlace a un ejemplo de validación de formulario sin el uso de Javascript, ni ningun otro framwork. Tan solo HTML5 y CSS3. Cada día la mayor compatibilidad de estos con HTML.

esta validación debe de ser siempre complementada con validación en el lado del servidor. Porque esta siempre puede saltarse con pluguins o navegadores antiguos o falsificación de peticiones POST…

Asi que por todo ello recomendamos que sea usada como metodo de filtrado previo, mejorar la experiencia del usuario. Ahorrar peticiones la servidor.

el enlace Live demo funcionando es:

http://webdesigntutsplus.s3.amazonaws.com/tuts/214_html5_form_validation/demo/index.html

la teoria está aquí: http://webdesign.tutsplus.com/tutorials/site-elements/bring-your-forms-up-to-date-with-css3-and-html5-validation/

detener el envio de un formulario con javascript

Lunes, 2 de Marzo de 2009

Para poder evitar o detener el envío de un formulario desde javascript será tan facil como en el evento onsubmit igualarlo a return false.

HTML:
  1. <form actio="http://tupagina.com/fichero.php" onsubmit="return false;">
  2. ...
  3.  </form>

de este modo no serviria de mucho puesto que nunca se enviaría el formulario, podemos simplemente enviarlo a una funcion:

HTML:
  1. <form actio="http://tupagina.com/fichero.php" onsubmit="return funcion();">
  2. ...
  3.  </form>
  4. function funcion(){
  5. if(...) return true;
  6. return false;
  7. }
  8. </script>

de este modo en la funcion podremos validad para metros, y hacer que se para el envio del formulario o enviarlo si todo es correcto.

Ahora bien, que pasa cuando queremos separar la declaración de los eventos del código html?

pues bien, si usamos los metodos addlistener o attachEvent para ie, al intentar devolver false, paa evitar que se envie nos damos cuenta que no funciona.

Asi:

JAVASCRIPT:
  1. AnadirEvento("submit",function(event)
  2. {
  3.          event.preventDefault(); // para FF standard
  4.          event.returnValue=false; // Para IE
  5.          funcionCualquiera();
  6.          return false; No tiene efecto sobre los evento
  7. }
  8. ,formulario);
  9.  
  10. //funcion generica para añadir eventos cross browser
  11. function AnadirEvento(evento, funcion, elemento) {
  12.    
  13.     if (elemento.addEventListener)  // standard W3C DOM
  14.         return elemento.addEventListener(evento,funcion,false);
  15.     else if (elemento.attachEvent) { // IE revelde DOM
  16.          return elemento.attachEvent("on"+evento, funcion);
  17.     }else{ // resto navegadores
  18.         try{
  19.         elemento["on"+evento] = funcion;
  20.         }
  21.         catch(e){throw 'No es posible añadir evento';}
  22.      }
  23.     
  24. }

Pues cuando añadimos un evento y declaramos una funcion anonima para efectuar diversas acciones, no tiene efecto usar el return false. Asi deberemos o indicar de alguna menera que queremos detener el evento por defecto para que no se envie el formulario o no se siga un enlace.

Así para ello tenemos dos funciones de javascript.

event.preventDefault() -> que sirve para prevenir que se ejeute la funcion por defecto del evento en cuestion. Si es un formulario evitará que se envie el formulario a la url del action. Si es un enlace se evitara o se prevendrá de que se vaya la pagina a la url del href.

event.returnValue= false -> Se puede igualar a true o a false, es exclusivo de Internet Explorer. Ahora con este podemos desactivar o hacer desactivar la funcion del evento.

Habrá que controlar cuando usar uno u otro, para evitar porblemas. en este ejemplo no se hace, se llama a los dos seguidamente.

un par de enlaces ineresantes: funcion prevent generica
ejemplo para desactivar un enlace: