Ajaxman » Javascript

[Javascript] simpleValidate Jquery Plugin

Ajaxman — Sat, 30 Apr 2011 05:02:40 +0000

Pues les cuento un preámbulo

Una de las cosas que menos me gusta es estar repitiendo código (recordemos -DRY-) entonces, pues cuando deseaba validar un formulario siempre andaba buscando cual opción era la mejor, y hay muchas opciones y son excelentes en lo que hacen, sin embargo todas tenían un punto débil, por ejemplo que no soportaban ajax, es decir terminaban de validar y se seguían (enviaban el formulario), otros me mandaban mensajes de errores de validación en ciertos colores y en cierto lugar que si bien es correcto, a veces en muchos proyectos no va el estilo o simplemente quieren ponerle un alert o similar.

Bajo ese preámbulo y recordando que siempre quise hacer un validado de formularios con Javascript (hace años hice uno chafita con Javascript).

Entonces pensé por que no hacer uno que fuera muy simple de usar y que no fuera obtrusivo, y así fue como desarrolle simpleValidate que es un plugin el cual como su nombre lo dice solo es un validador de formularios y nada mas.

Les presento a:

simpleValidate – Jquery Plugin

A continuación pongo las características.

Fácil de usar
Extremadamente Ligero 2kb (minifed)
Compatible con Jquery 1.5.2
No requiere CSS especial
No obtrusivo
Posibilidad de inyectar algún tipo de alert especial mediante sus settings
Completamente personalizable
Soporta expresiones regulares
Y valida checkboxes

Su uso es muy simple, solo necesitamos de Jquery y del plugin

Y ejecutamos el plugin donde indicamos el id del Formulario en cuestión




 
 
 
 
 
 
 
 
 
 Name
 
 Ingrese una cantidad valida (tipo numero.decimal(2 digitos))
 
 Required

Y con esto ya tenemos funcionando el plugin ahora necesitamos indicarle cuales son los campos a validar lo haremos de la siguiente forma.

En cada input que necesitemos, vamos a agregar lo siguiente en el campo (input) que queramos validar

title=”valid[tipo_de_validacion,{params,}]“

Donde los tipos de validación son los siguientes:

valid[required,mensaje de error] ==> Solo verifica que el campo tenga algún valor y el segundo parametro es lo que mostrara cuando no pase la validación
valid[email,mensaje de error] => Valida que sea un email valido y si no muestra el mensaje del segundo parametro.
valid[zip,mensaje de error] => Valida que sea un código postal valido (5 caracteres numéricos) y si no muestra el mensaje del segundo parámetro.
valid[minlength,mensaje de error,numero_minimo] => Valida que el campo contenga un mínimo de caracteres indicado el el ultimo parámetro
valid[maxlength,mensaje de error,numero_maximo] => Valida que el campo contenga un máximo de caracteres indicado el el ultimo parámetro
valid[regex,mensaje de error] => Este forma de validación necesita un parámetro data dentro del input donde venga especificada la expresión regular a validar y si no pasa lanza el error.
valid[ensaje de error] =>Este solo es aplicable a los checkboxes y solo contiene como argumento el error que mostrara cuando el checkbox no este marcado

Los valores que se pueden personalizar dentro del plugin son los siguientes.


 $(document).ready(function(){

   $("#testForm").simpleValidate({
     text: Array("El campo"," es obligatorio"),
     email: "Ingrese un email valido",
     zip: "Ingrese un codigo postal valido",
     min: Array(5,"Ingrese al menos ", "caracteres"),
     max: Array(10,"Ingrese maximo", "caracteres"),
     checkmessage:'Es necesario marcar el campo',
     field: 'valid',
     msg: function(msg){
      alert(msg);
     }
   });

 });

Donde

text: Es un array que contiene dos textos que mostrara en el error cuando un campo sea required de la forma (texto1+ nombre_campo+texto2)
email: Es el error que mostrara cuando un email este invalido
zip: Error cuando el codigo postal este mal
min: array en donde viene el error a mostrar y el numero de elementos a validar por default
max: array en donde viene el error a mostrar y el numero de elementos a validar por default
checkmessage: Este es el mensaje que mostrara cuando se genere un error al no estar validado un checkbox
field: es la clave para validar los campos, es decir cuando buscamos title=”valid[etc]” valid es el contenido del title del campo si le ponemos otro, podemos usar dentro de title lo que le hayamos puesto en esta opcion evitando asi posibles colisiones de palabras que esten usando otros plugins.
msg: esta es una funcion, en donde solo estamos mandando un alert para mostrar el error, sin embargo si posees algun otro plugin como Sexyalertbox o similar puedes meterlos dentro de esta funcion asi cuando se lanza el error mostrara el cuadro de dialogo de la forma como deses (por ejemplo dentro de un Sexyalertbox).

Es importante recalcar que estos parámetros son cambiados por los mensajes establecidos dentro del propio input, así que casi nunca se cambian estos valores.

Además el plugin recibe un parámetro mas el cual es una función anónima (según yo seria un closoure ), la cual se ejecutara cuando termine la validación, es decir si al terminar tu validación deseas que en vez de enviar el formulario normalmente, lo envié por XMLHttpRequest(aka Ajax), esta función al estar agregada hace que tu tomes la decisión de que hacer una vez terminada la validación y pasada obviamente.

Ejemplo complejo, usando JAlert para mostrar los errores (http://www.anieto2k.com/2008/12/31/jquery-alert-dialogs-reemplazo-para-alert-prompt-y-confirm/)


 $(document).ready(function(){

   $("#testForm").simpleValidate(
     {
       msg: function(msg){
         jAlert(msg, 'Alert Dialog');
          }
     },
     function (){
       $.post('/account/',
              $(this).serialize(),
              function( Response ){
                 jAlert("Sus datos se han enviado via Ajax");
              });
     }
   );

 });

El ejemplo anterior, hace una validación pero los mensaje de error los muestra de una forma diferente usando otro plugin (JAlert en este caso) además de eso al terminar la validación envía todos los datos del formulario por post usando ajax y cuando recibe respuesta manda un alert.

Como vemos es muy fácil, poderoso y practico de usar.

No se si me explique bien pero estar posteando por la noche da bastante sueño, ojala y les haya gustado mi plugin y sobre todo ojala y les sea útil.

Para bajarlo y ver las actualizaciones aquí dejo la información:

simpleValidate Version 1.6 Beta

GitHub: https://github.com/Ajaxman/simpleValidate (Fork-ME =) )
Plugins Jquery: http://plugins.jquery.com/project/simpleValidate

Cualquier felicitación, duda, comentario, sugerencia, correción , Donación =), con gusto estoy para atenderla, la licencia es GPL =)

Hasta el próximo post

[Javascript:Jquery] Plugin GoogleMaps

Ajaxman — Wed, 06 Jan 2010 17:57:29 +0000

Me entero en Twitter, sobre un plugin de Jquery el cual nos permite trabajar comoda y apliamente con GoogleMaps de una manera muy facil.

Para usarlo primero nos bajamos el Jquery y despues el plugin

En nuestro HTMl agregamos ambos JS’s (El Jquery primero y despues el plugin Jquery.Googlemaps)

Y ahora a agregamos el siguiente script (Javascript)

$('selector').googleMaps();

Y listo con eso ya podemos ver como funciona

Aunque como hemos de suponer es mucho mas funcional usando algo mas de codigo, aqui algunos ejemplos.

Por ejemplo podemos indicar la latitud y la longitud

$(document).ready(function() {
    $('selector').googleMaps({
        latitude: 49.26063518364422,
        longitude: -123.15673828125
    });
});

O algo tan avanzado como una marca, personalizada en cierto punto del mapa.


$(document).ready(function() {
    $('selector').googleMaps({
        markers: {
            latitude:     37.4416,
            longitude: -122.1516,
            icon: {
                image: 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png',
                shadow: 'http://chart.apis.google.com/chart?chst=d_map_pin_shadow',
                iconSize: '12, 20',
                shadowSize: '22, 20'
            }
        }
    });
});

Y con el ultimo ejemplo podriamos obtener algo como esto

Google Maps jQuery Plugin

Toda la documentacion y mas ejemplos en la pagina web del autor
Google Maps jQuery Plugin – Shawn Mayzes

[Programación] El top de los lenguajes mas utilizados

Ajaxman — Thu, 16 Jul 2009 22:10:00 +0000

Como fiel defensor de Php, me da mucho gusto que en el top de los lenguajes mas utilizados realizado por TIOBE Programming Community, nuestro querido lenguaje esté en el lugar numero 4(comparado con el 5 que tenia el año pasado).

Algo que podemos destacar (lo comentan en barrapunto)es que Java ha tenido un fuerte descenso, y C sigue creciendo, también otro que esta cayendo muy fuerte es Perl, claro que hay muchos cambios mas, miren la tabla.

Position Jul 2009	Position Jul 2008	Programming Language	Ratings Jul 2009	Delta Jul 2008	Status
1	1	Java	20.452%	-0.89%	A
2	2	C	17.319%	+1.37%	A
3	3	C++	10.419%	-0.27%	A
4	5	PHP	9.269%	-0.26%	A
5	4	(Visual) Basic	7.789%	-2.66%	A
6	8	C#	4.540%	+0.54%	A
7	7	Python	4.435%	-0.54%	A
8	6	Perl	4.200%	-0.93%	A
9	9	JavaScript	3.513%	+0.76%	A
10	10	Ruby	2.567%	-0.17%	A
11	11	Delphi	1.998%	-0.01%	A
12	13	PL/SQL	0.891%	+0.16%	A
13	14	SAS	0.794%	+0.17%	A
14	24	RPG (OS/400)	0.740%	+0.41%	A
15	16	Pascal	0.707%	+0.27%	A
16	26	ABAP	0.703%	+0.44%	A-
17	20	Lisp/Scheme	0.607%	+0.22%	B
18	12	D	0.593%	-0.63%	B
19	18	Lua	0.531%	+0.12%	B
20	27	MATLAB	0.512%	+0.26%	B

Si bien este esto es algo basado en cálculos, y no es 100% exacto podemos ir viendo la tendencia en cuanto a el uso de lenguajes programación se refiere.

Y para terminar la pregunta del millón ¿Por que Php sigue siendo tan mal pagado (sobre todo en México)?
La respuesta podría ser, por que es fácil, pero la duda surge por lo siguiente:

Si necesitas una web que para un portal , que tenga usuarios, panel de control, si contratas a alguien que lo haga en Java le pagarías lo triple que si lo hace con Php, ¿por qué? si se obtiene lo mismo!.

¿Ustedes que opinan? por que sucede esto.

Me entere por Barrapunto: Top 20 de lenguajes de programación actualizado a Julio de 2009
El original esta aquí con mas datos (en ingles): TIOBE Programming Community Index for July 2009

[Javascript] Sexy Alert Box: Mejorando el alert de Javascript

Ajaxman — Thu, 21 Aug 2008 18:01:13 +0000

Creo que ahora si le voy ha echar muchas ganas ha este blog, como ya terminaron las vacaciones las visitas han empezado a subir de muy buena forma, ahora si vamos por las 1000 diarias para lo cual ya falta poco.

Y bien, como ando tan a gusto posteare algo muy interesante y muy útil para los desarrolladores Web, y es un script que me encontré para poder mejorar nuestras aplicaciones, inclusive yo lo estoy pensando seriamente en usarlo con mi proyecto.

Se llama Sexy Alert Box,y retomando lo que dicen en coders.me Sexy Alert Box es un clon “sexy” del clásico alert de javascript. Está basado en PBBAcpBox — un script que lamentablemente el autor paró de desarrollar — sin embargo, el código fue publicado bajo una licencia libre, con lo cual pude mejorarlo y adaptarlo a la versión 1.2 de Mootools.Eduardo

Ahora bien de que se trata este script, bien recordemos que todos los programadores alguna vez hemos usando la famosa función Alert de Javascript, pues como Eduardo lo dice,el ha retomado un código y lo ha mejorado para poder usarlo con Mootools, para que ese clásico Alert funcione y se vea mejor, como lo muestra la siguiente imagen.

Para usarla es muy simple solo tenemos que agregar el siguiente código a nuestra pagina web.

[Javascript]

[/Javascript]

De esta forma ya podremos usarlo y disfrutar de la ventajas de este script, esta licenciado bajo la licencia MIT.
Mas información y documentación de este script en | Sexy Alert Box
Descarga SexyAlertBox.mini.js (versión comprimida)
Descarga SexyAlertBox.zip (SexyAlertBox.js + mootools + ejemplos)

[Jquery-Plugin]Sparklines, creado graficas con Jquery

Ajaxman — Thu, 17 Jul 2008 18:55:32 +0000

Leo una interesante entrada de Andrés Nieto sobre un plugin con el cual podemos crear pequeñas grafícas usando Javascript, obviamente apoyandonos de la librería Jquery.

Este importante plugin tiene varias opciones comunes como son

type – line (default), bar o tristate
width – Ancho de la gráfica, por defecto “auto”.
height – Altura de la gráfica, por defecto “auto”.
lineColor – Color de la línea
fillColor – Color del relleno

Esto lo recalco por que ademas de eso podemos usar muchas otras opciones, como son

Opciones de gráficas tipo línea:

spotColor – Oculta o muestra el color del valor final.
spotRadius – En pixels (default: 2)

Opciones de gráficas tipo Bar:

barColor – Color de los valores positivos
negBarColor – Color de los valores negativos
barWidth – Tamaño de cada barra, en pixels
barSpacing -Separación entre barras, en pixels.
zeroAxis – Centro del eje Y.

Opciones de gráficas tipo Tristate:

posBarColor – Colores valores positivos
negBarColor – Colores valores negativos
zeroBarColor – Colores para valores cero.
barSpacing – Separación entre barras, en pixels
zeroAxis – Centro del eje Y

Creo que Ajax, esta llegando hasta limites insospechados si ha esto le añadimos la próxima versión de HTML, el 5, tal ve pronto salgan juegos muy buenos creados con Javascript y hasta aplicaciones mas poderosas.

Para saber como pueden usarlo en su sitio web, pueden darse la vuelta por el Blog de Andrés donde viene la información completa.
Vía | jQuery Sparklines, gráficas sencillas con jQuery

[Ajax] mcDropdown: Mejorando las listas desplegables con Jquery

Ajaxman — Mon, 30 Jun 2008 16:44:50 +0000

Después de varios días sin postear por tener mucho trabajo, vuelvo a escribir, y saben postear y trabajar es complicado, creo que debería dejar de trabajar y dedicarme ha escribir post’s .

Vía Hotajax(un blog bastante interesante sobre Ajax), me acabo de enterar de un importante plugin para que podamos mejorar bastante nuestras listas desplegables.

Esta funcionalidad nos permite generar submenus desplegables desde un combobox, osea elegir y desde ahí volver a elegir otra opción, además de que todo esto lo guarda en un “historial” para saber donde andamos, les pongo una imagen para que vean a lo que me refiero.

Para hacer uso de este plugin vamos a necesitar descargarnos mcdropdown, el cual ya trae todos los script necesarios para que funcione.

Codigo despues del salto

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Giva Labs - mcDropdown jQuery Plug-in | Giva

Example

Please select a category:

Arts & Humanities
- Photography
  - 3D
  - Digital
- History
- Literature
Business & Economy
Computers & Internet
Education
Entertainment
- Movies
- TV Shows
- Music
- Humor
Health

Vía | http://www.givainc.com/labs/mcdropdown_jquery_plugin.htm
Y ejemplo vía | Example mcDropdown

[Javascript] Menú deslizante usando Jquery

Ajaxman — Wed, 11 Jun 2008 15:35:19 +0000

El seraphinux ultimamente le ha dado por escribir mas que de costumbre y gracias ha ello me he encontrado con un menú deslizante echo con Javascript.

Para que se den una idea de que les hablo aquí esta la imagen de menú normal

Y aquí la imagen del menú pero ahora desplazado, o deslizado.

Esto fue hecho gracias a la potencialidad y funcionalidad de Jquery, que es muy fácil de adaptarse a cualquier uso.

Veamos como se hizo, siguiendo el ejemplo de la fuente.

Primero necesitamos usar HTML,

[HTML]

Isn’t this nice?

[/HTML]

Ahora le aplicamos el siguiente CSS

[CSS]

[/CSS]

Y para hacerlo funcionar usamos Jquery de la siguiente forma

[JAVASCRIPT]

[/JAVASCRIPT]

Como ven es bastante simple, las imagenes usadas y el ejemplo de esto lo podrán encontrar en

http://www.webresourcesdepot.com/wp-content/uploads/file/jquery-sliding-menu/

Aunque ultimamente me ha estado atrayendo bastante Mootools, Jquery sigue teniendo muchisima utilidad.

Estoy planeando algo grande (después de que libere algo que tengo pendiente ups, solo me falta terminar la traducción y listo), que tendrá bastante Ajax y javascript, la pelea esta en que Framework utilizare, tal vez sera Jquery o Mootools, no lo se hagan sus apuestas.

Vía | Menu deslizante con jQuery
Surgio en | Sliding Top Menu With jQuery