Archivo categoría Aplicacion web

Validar formularios en JavaScript

En toda aplicación web de hoy en día no pasa sin que el usuario meta la pata, aunque sea de forma premeditada, por eso los fromularios hay que comprobar que no nos la cuelan. Validar los datos hay algo que siempre hay que hacer en el lado del servidor, pero le podemos dar agilidad a la web si antes de mandar el formulario lo verificamos en el lado del cliente.

Esto para nada es un problema nuevo, y ya se ha intentado solucionar de muchas maneras en JavaScript. Algunas de las librerias(bibliotecas) son especificas para validación, otras son usos especificos de otras más genericas. En cualquier caso si quieres ponerte a escribir tus funciones JS que validen los formularios que sepas que estas Reinventando la Rueda, porque ya se ha hecho unas cuantas veces:

Ketchup basado en JQuery:

http://demos.usejquery.com/ketchup-plugin/

Vanadium:

http://vanadiumjs.com/

JQuery:

http://bassistance.de/jquery-plugins/jquery-plugin-validation/ (demo)

Validation con Prototype:

http://tetlaw.id.au/view/javascript/really-easy-field-validation (demo)

MooTools:

http://mootools.floor.ch/en/demos/formcheck/ (demo)

JsVal:

http://jsval.fantastic-bits.de/

Validanguage:

http://www.drlongghost.com/validanguage.php (demo)

Django (basado en Google App Engine):

http://code.google.com/appengine/articles/djangoforms.html

LiveValidation:

http://livevalidation.com/ (demo/ejemplos)

wForms:

http://www.formassembly.com/wForms/ (demo)

Yav (última versión del 2008):

http://yav.sourceforge.net/

JSValidate/JValidate:

http://www.jsvalidate.com/ , http://www.jvalidate.com/

fValidator:

http://zendold.lojcomm.com.br/fvalidator/

qForms (últmia versión del 2007):

http://www.pengoworks.com/index.cfm?action=get:qforms

Validatious:

http://validatious.org/

Si te quieres montar tu propia libreria puedes empezar con los ejemplos propuestos en w3schools.

Libreria de validacion abandonada en 2004 chrysalis.

A parte de la validación el elemento visual es también algo que deja que desear bastante en los formularios. CustomFormElements da un aspecto agradable a los formularios web, incluso se pueden parecer a aplicaciones de escritorio. Está disponible para usar con Mootools y JQuery.

, , , ,

1 Comentario

Programando en javascript en el navegador

He probando por recomendación de ThinkWasabi una herramientilla bastante util que se llama Quix. Tiene muchisimas funcionalidades y funcina a base de comandos, por eso es interesante mirarse la ayuda que tiene para ejecutarlos. Tiene cosas utiles para SEO y reducción de URLs, en fin lo que le pedirias a un monton de addons pero solo en uno y bueno … por comandos, al que no le guste nada, pero está bastante bien.

Quix

Quix

Va directamente desde el navegador, lo arrastas y lo pegas y te sale una pantallita donde escribes el comando.

Pero lo que arrastras es en realidad un método en JavaScript que se va a ejecutar cada vez que pinches en el enlace que arrastras a la barra de marcadores (en firefox, como se llama en los otros navegadores).

En la barra de estado cuando estas encima del enlace se ve claramente que es codigo JavaScritp que va a invocar a la función ‘Quix()’ y empieza la declaración de la función. Por curiosidad me he CopiadoYPegado el codigillo para verlo.

El texto debidamente tabulado quedaria algo así:

javascript:Quix();

function%20Quix(){
	var%20e=encodeURIComponent;
	var%20t=window.getSelection?window.getSelection():(
		document.getSelection?document.getSelection():(
			document.selection?document.selection.createRange().text:''
		)
	);
	var%20c=window.prompt('Quix:%20Type%20`help`%20for%20a%20list%20of%20commands:');
	if(t!=''){
		if(c){
			c+='%20'+t;
		}
		else{
			c=''+t;
		}
	}
	if(c){
		var%20u='http://quixapp.com/go/?c='+e(c)+'&t='
			+(document.title?e(document.title):'')+'&s='+'&v=080'+'&u='
			+(document.location?e(document.location):'');
		d=''+document.location;
		if(d.substr(0,4)!='http'){
			window.location=u+'&mode=direct';
		}
		else{
			heads=document.getElementsByTagName('head');
			if(c.substring(0,1)=='%20'){
				var%20w=window.open(u+'&mode=direct');
				w.focus();
			}
			else%20if(heads.length==0){
				window.location=u+'&mode=direct';
			}
			else{
				q=document.getElementById('quix');
				if(q){
					q.parentNode.removeChild(q);
				}
				sc=document.createElement('script');
				sc.src=u;
				sc.id='quix';
				sc.type='text/javascript';
				void(heads[0].appendChild(sc));
			}
		}
	}
}

La funcioncilla tiene su tela, pero lo unico que cambia respecto al javascript normal es que los espacios se cambian por %20 para que el navegador no se haga un lio. Pero a parte de esto te puedes escribir tus funciones todo lo largas que quieras e incrustarlas en el navegador tal cual.

Al fin y al cabo el navegador interpreta/ejecuta un mazo de elementos en html, css y javascript por no contar los aplets de java, los objetos flash y ahora los silverlight/moonlight que se le envia desde el servidor. Que le importa hacerlo tambien en local.

La mayoria de los add-ons de firefox se hacen de forma similar, al final siempre se llama a la maquina virtual de JS para que haga algo, ya sea conectar por ajax con algun servidor que da el servicio o con alguna clase Java compilada que te ha instalado la extensión.

, , ,

No hay Comentarios