Curso de jQuery-Introducción
De WikiEducator
Saltar a: navegación, buscar
jQuery
Tutorial para desarrollar en Web mediante jQuery.
Contenido
Validación de Formularios
Instalación
- Localizar el plugin más adecuado para la validación de formularios desde la lista de plugins de la web de jQuery
- Elegimos jQuery Validation por ser el más antiguo y popular de todos.
- La descarga contiene todos los ficheros necesarios, incluidas las demo.
- Se pueden consultar las demos online
Pasos previos
- Para utilizar jquery.validation, agregar referencia a las librerías jQuery y jquery.validation:
<script src="scripts/jquery-1.6.4.js" type="text/javascript"></script> <script src="scripts/jquery.validate.js" type="text/javascript"></script>
- Directorio dist:
- Se encuentran los scripts propios de validación.
- Hay versión de desarrollo y versión de producción
- El fichero additional_methods.js tiene librerías adicionales de validación, las menos habituales.
- Directorio lib:
- Librerías útiles, como distintas versiones de jQuery (necesarias para el correcto funcionamiento del plugin).
- jquery.forms.js:
- jquery.mockjax.js:
- Directorio localization:
- Ficheros de traducción de los mensajes del plugin.
- Habrá que utilizar el de español en nuestros desarrollos.
- Directorio demo:
- Útil echarle un ojo, nos puede servir de ayuda para implementar nuestras soluciones.
Primer ejemplo
- Versión actual de jQuery: 1.10.2 y 2.0.3
- Licencia MIT
- La funcionalidad es la misma
- La rama 2.x no es compatible con IE 6-8
- La rama 2.x es algo más ligera
- Usaremos la rama 1.x:
- Misma funcionalidad
- Mayor compatibilidad
Mensajes de error
- Versión de producción:
- Minified y comprimida
- Aproximadamente 90KB
- Versión de desarrollo:
- Sin comprimir
- Aproximadamente 3 veces más pesada, en torno a 270KB
- La rama 2.x pesa un 10% menos, resulta inapreciable
- Se puede descargar de la web de jQuery
- Versión de producción:
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
- Versión de desarrollo
<script type="text/javascript" src="jquery-1.10.2.js"></script>