Formularios HTML basicos con cambio de estilo con jQuery

En este artículo vamos a discutir cómo mejorar nuestros formularios con jQuery y varios plugins jQuery. jQuery es una librería JavaScript que permite una fácil soporte de DOM HTML, animaciones, manejo de eventos, Ajax y el apoyo. Usted puede encontrar más información sobre jQuery aquí. jQuery también soporta plugins. plugins permiten a los desarrolladores escribir objetos jQuery ayuda como la validación de formularios, visores de imágenes, mejoras de interfaz gráfica de usuario, etc. Vamos a ver en un par de plugins para mejorar nuestras formas.

Lo primero que tenemos que hacer es jQuery de referencia en nuestra página HTML. Hay varias maneras de hacer esto. El primero es ir a la página web de jQuery y descargar una copia de la biblioteca, el lugar en su servidor web, y añadir la referencia a su página. Otra forma (mejor) es utilizar una red de distribución de contenidos (CDN). Tanto Google (http://code.google.com/apis/ajaxlibs/documentation/) y Microsoft (http://www.asp.net/ajaxlibrary/cdn.ashx) ofrecen CDN para jQuery. Vamos a utilizar el uno para Microsoft, ya que también alberga la biblioteca de validación de jQuery.

En la etiqueta de la cabeza de la forma HTML vamos a poner esto:

1
2
3
4
5
6
7

&<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
 
	<script>
	$(document).ready(function () {
 
	});
	</script>

Se trata de un sencillo formulario para pedir la dirección de envío. Tiene un pocos campos obligatorios. ¿Cómo podemos asegurar que los campos se llenan? Si esta forma es entrar en una base de datos, ¿cómo podemos asegurar que la longitud de los campos del formulario coincida con la longitud de los campos de base de datos? ¿Cómo podemos asegurar que el “CP” es sólo números? Ahí es donde entra en juego la validación de formularios

NOTA: esta forma no se “internacionalizó” como se pide información que es claramente para los Estados Unidos. Usted querrá hacer su forma más amistosa a nivel internacional si piensa en el envío a otros países.

Afortunadamente para nosotros, jQuery tiene un plugin para la validación de formularios. El plug-in de validación de jQuery por Jorn Zafferer es la colección de forma muy potente de validación. Sólo pueden rayar la superficie de lo que puedes hacer con este plugin para la validación de formularios. Lo primero que tenemos que hacer es agregar otra referencia a la biblioteca en nuestra etiqueta de cabecera de la página HTML.

1

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>

Ahora nuestra etiqueta principal se parece a esto:

1
2
3
4
5
6

<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
	<script>
	$(document).ready(function () {
	});
	</script>

Como puede ver, estamos utilizando CDN de Microsoft de nuevo para obtener la biblioteca. Lo que queremos hacer ahora es llamar a la biblioteca de validación en la función jQuery arriba para “unir” al formulario.

1
2
3
4
5
6

<script>
	$(document).ready(function () {
			$("#frm").validate({
			});
	});
	</script>

La cámara se conecta a la biblioteca de validación del formulario con el ID de “FRM”. Cuenta la biblioteca para validar el formulario cuando el botón de enviar es pulsado. Lo siguiente que tenemos que hacer es decirle a la biblioteca lo que los campos son obligatorios.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<script>
		$(document).ready(function () {
			$("#frm").validate({
				rules: {
					Name: {
						required: true,
						maxlength: 50
					},
					Address: {
						required: true,
						maxlength: 50
					},
					Address2: {
						maxlength: 50
					},
					City: {
						required: true,
						maxlength: 50
					},
					State: {
						required: true,
						maxlength: 2
					},
					Zip: {
						required: true,
						maxlength: 5,
						digits: true
					}
				}
			});
		});
	</script>

Como puede ver, hemos añadido “necesaria” atribuye a los campos obligatorios. El “MaxLength atributo” le dice que sólo desea permitir X número de caracteres. En el “Zip” sobre el terreno, hemos limitado los datos a los dígitos (números).

NOTA: Esta validación es del lado del cliente y sólo se está usando JavaScript. Si el usuario tiene JavaScript deshabilitado o de algún modo by-pass esta validación, usted quiere tener la validación en el procesador de forma por lo que no causa un error.

Página: 1 2