Otro de los puntos fuertes de JQuery es la gran comunidad que gira en torno a dicho proyecto aportando cientos de plugins que podemos utilizar de forma totalmente gratuita.
Para descargarlos accede al repositorio oficial de plugins haciendo clic en este enlace y navega entre los etiquetados como más populares (animaciones, AJAX, formularios, etc.) o utiliza el buscador que encontrarás en la parte superior de la página. También puedes encontrar otros muchos buscando en la web.
A continuación mostraremos algunos ejemplos prácticos de cómo integrar plugins de JQuery en una página web.
En este punto vamos a mostrarte cómo utilizar uno de los mejores plugins existentes para validar formularios con JQuery, Validate, el cual dispone de varias métodos para comprobar que los componentes requeridos han sido rellenados y/o que el formato de los datos es el esperado.
Para descargarlo haz clic en este enlace y a continuación pulsa en Download:
Una vez descomprimido el archivo descargado entra en la carpeta dist y copia los archivos jquery.validate.min.js y additional-methods.min.js a nuestro proyecto, para luego enlazarlos en nuestras páginas web.
El primero de dichos archivos contiene el plugin en sí, y el segundo incorpora más métodos aún para relizar la validación.
Por otro lado, podemos extender las funcionalidades del plugin escribiendo otros métodos propios (en tal caso es recomendable guardarlos en un archivo aparte).
Algunos de los métodos de validación más útiles que incluye son (para más información consulta el enlace a la documentación facilitado más abajo):
- required(): especifica que el campo debe contener un valor.
- minlength() / maxlength: permite indicar un número mínimo/máximo de caracteres que ha de contener.
- rangelength(): indica que el número de caracteres que puede contener el componente ha estar entre un rango especificado.
- min() / max: permite indicar el valor mínimo/máximo que ha de contener.
- range(): indica que el valor ha de estar entre un rango específico.
- email(): especifica que el valor introducido debe tener formato de dirección de correo electrónico.
- url(): especifica que el valor introducido debe tener formato de dirección URL válida (comenzando por 'http://', 'https://' o 'ftp://').
- number(): indica que el valor introducido deberá ser numérico (entero o decimal).
- digits(): indica que el valor introducido deberá ser numérico (entero).
- creditcard(): indica que el valor introducido deberá tener formato de número de tarjeta de crédito.
- equalTo(): permite especificar que el valor introducido tendrá que ser el mismo que contenga otro campo (útil por ejemplo cuando queramos que el usuario confirme la contraseña o dirección E-Mail).
- accept(): en caso de usar un componente de formulario para seleccionar un archivo y enviarlo al servidor (hacer upload) permite indicar los tipos de archivo MIME que serán admitidos.
- extension(): como la opción anterior, pero permite indicar las extensiones de archivo que serán admitidas.
Por otro lado, si enlazamos el archivo additional-methods.min.js dispondremos entre otros de los siguientes métodos:
- dateITA(): admite fechas con formato 'dd/mm/yyyy'.
- time(): admite una hora en formato de 24 horas, entre 00:00 y 23:59.
- time12h(): admite una hora en formato de 12 horas (ej: '5:30 pm', '05:30 PM').
- stripHtml(): elimina tags HTML.
- minWords() / maxWords: indica que el componente deberá contener un número mínimo/máximo de palabras.
- rangeWords(): indica que el componente podrá contener un número de palabras entre el rango que especifiquemos.
- letterswithbasicpunc(): permite que un cuadro de texto contenga sólo letras y unos determinados caracteres (guión medio, punto, coma, paréntesis, comillas simples o dobles y espacio).
- nowhitespace(): no permite que hayan espacios.
- lettersonly(): pemite que hayan letras únicamente.
- alphanumeric(): permite sólo letras, números y guiones bajos.
- integer(): admite sólo números enteros (positivos o negativos).
- ipv4(): dirección IP en formato IPV4.
- ipv6(): dirección IP en formato IPV6.
En caso de que el formulario haya sido cumplimentado de forma correcta tenemos la posibilidad de usar el método submitHandler() para procesar una función callback.
Veamos ahora un ejemplo básico:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>InformaticaPC | Validar formularios con JQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body { background-color:lightyellow;font-family:Arial;font-size:10pt; }
label { width:200px; }
input[type="text"] { width:200px;margin:2px; }
#btnEnviar { margin-top:20px; }
</style>
<!-- Agregamos JQuery -->
<script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>
<!-- Agregamos el plugin para validar el formulario -->
<script type="text/javascript" src="../lib/jquery.validate.min.js"></script>
<script type="text/javascript" src="../lib/additional-methods.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#form1").validate({
rules: {
"txtNombre": { required:true, lettersonly:true },
"txtApellidos": { required:true, lettersonly:true },
"txtFNac": { dateITA:true },
"txtNIF": { rangelength:[9,9] }, // Formato
"txtCPostal": { required:true, digits:true, rangelength:[5,5] },
"txtMail": { required:true, email:true },
"txtBlog": { url:true }
},
messages: {
"txtNombre": { required:"Introduce el nombre", lettersonly:"Sólo se admiten letras en el nombre"},
"txtApellidos": { required:"Introduce los apellidos", lettersonly:"Sólo se admiten letras en los apellidos"},
"txtFNac": { dateITA:"<img src='error.gif' alt='' /> Formato de fecha no válido" },
"txtNIF": "Formato de NIF incorrecto",
"txtCPostal": { required:"Escribe un código postal válido", digits:"Sólo pueden haber números en el código postal", rangelength:"El código postal debe contener cinco dígitos" },
"txtMail": { required:"Introduce tu E-Mail", email:"La dirección E-Mail no tiene formato correcto" },
"txtBlog": "URL no válida"
},
submitHandler: function(form){
alert("Los datos son correctos");
}
});
});
</script>
</head>
<body>
<form name="form1" id="form1" method="post" action="#">
<label for="txtNombre">Nombre (*):</label>
<input type="text" name="txtNombre" id="txtNombre" size="20" /><br />
<label for="txtApellidos">Apellidos (*):</label>
<input type="text" name="txtApellidos" id="txtApellidos" size="40" /><br />
<label for="txtFNac">F/nacimiento (dd/mm/yyy):</label>
<input type="text" name="txtFNac" id="txtFNac" /><br />
<label for="txtNIF">N.I.F.:</label>
<input type="text" name="txtNIF" id="txtNIF" /><br />
<label for="txtCPostal">Código postal (*):</label>
<input type="text" name="txtCPostal" id="txtCPostal" /><br />
<label for="txtMail">E-Mail (*):</label>
<input type="text" name="txtMail" id="txtMail" /><br />
<label for="txtBlog">Blog personal:</label>
<input type="text" name="txtBlog" id="txtBlog" size="40" /><br />
<input type="submit" name="btnEnviar" id="btnEnviar" value="Enviar >>" />
</form>
</body>
</html>
Observa que por cada opción de validación definida en rules definimos otra en messages, y que en caso de que un componente tenga definida una sola regla basa con especificar un mensaje entre comillas.
Fíjate también en que dentro de messages es posible incluir código HTML.
Y ahora veamos otro ejemplo un poco más completo en el que configuramos la forma en que serán mostrados los mensajes de error (visualizándolos en un etiqueta HTML 'DIV' aparte):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>InformaticaPC | Validar formularios con JQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body { background-color:lightyellow;font-family:Arial;font-size:10pt; }
input[type="text"] { margin:2px; }
#btnEnviar { margin-top:20px; }
/* Definimos un estilo para el contenedor donde se mostrarán los mensajes de error */
#divErrores { color:yellow;background-color:red;margin-bottom:10px; }
/* Definimos un estilo personalizado para los mensajes de error */
.error { font-weight:bold; }
</style>
<!-- Agregamos JQuery -->
<script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>
<!-- Agregamos el plugin para validar el formulario -->
<script type="text/javascript" src="../lib/jquery.validate.min.js"></script>
<script type="text/javascript" src="../lib/additional-methods.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#form1").validate({
rules: {
"txtNombre": { required:true, lettersonly:true },
"txtApellidos": { required:true, lettersonly:true },
"txtFNac": { dateITA:true },
"txtNIF": { rangelength:[9,9] }, // Formato
"txtCPostal": { required:true, digits:true, rangelength:[5,5] },
"txtMail": { required:true, email:true },
"txtBlog": { url:true },
"selEstudios": { required:true },
"chkAceptar": { required:true }
},
messages: {
"txtNombre": { required:"Introduce el nombre", lettersonly:"Sólo se admiten letras en el nombre"},
"txtApellidos": { required:"Introduce los apellidos", lettersonly:"Sólo se admiten letras en los apellidos"},
"txtFNac": { dateITA:"Formato de fecha no válido" },
"txtNIF": "Formato de NIF incorrecto",
"txtCPostal": { required:"Escribe un código postal válido", digits:"Sólo pueden haber números en el código postal", rangelength:"El código postal debe contener cinco dígitos" },
"txtMail": { required:"Introduce tu E-Mail", email:"La dirección E-Mail no tiene formato correcto" },
"txtBlog": "URL no válida",
"selEstudios": "Selecciona tu nivel de inglés",
"chkAceptar": "Debes aceptar las condiciones"
},
errorContainer: $("#divErrores"),
errorLabelContainer: "#divErrores ul",
errorElement: "span",
wrapper: "li",
submitHandler: function(form){
alert("Los datos son correctos");
}
});
});
</script>
</head>
<body>
<div id="divErrores">
<ul id="lista"></ul>
</div>
<form name="form1" id="form1" method="post" action="#">
<label for="txtNombre">Nombre (*):</label>
<input type="text" name="txtNombre" id="txtNombre" size="20" /><br />
<label for="txtApellidos">Apellidos (*):</label>
<input type="text" name="txtApellidos" id="txtApellidos" size="40" /><br />
<label for="txtFNac">F/nacimiento (dd/mm/yyy):</label>
<input type="text" name="txtFNac" id="txtFNac" /><br />
<label for="txtNIF">N.I.F.:</label>
<input type="text" name="txtNIF" id="txtNIF" /><br />
<label for="txtCPostal">Código postal (*):</label>
<input type="text" name="txtCPostal" id="txtCPostal" /><br />
<label for="txtMail">E-Mail (*):</label>
<input type="text" name="txtMail" id="txtMail" /><br />
<label for="txtBlog">Blog personal:</label>
<input type="text" name="txtBlog" id="txtBlog" size="40" /><br />
<label for="selEstudios">Nivel de inglés (*):</label>
<select name="selEstudios" id="selEstudios">
<option></option>
<option value="1">Bajo</option>
<option value="2">Medio</option>
<option value="3">Alto</option>
</select><p />
<label for="chkAceptar">Acepto las condiciones:</label>
<input type="checkbox" id="chkAceptar" name="chkAceptar" value="S" /><p />
<input type="submit" name="btnEnviar" id="btnEnviar" value="Enviar >>" />
</form>
</body>
</html>
En el ejemplo hemos agregado los siguientes métodos (para más información consulta el enlace 'otras opciones de configuración' que encontrarás al final):
- errorContainer(): especifica un contenedor a usar para mostrar los mensajes.
- errorLabelContainer(): permite indicar dentro de qué elemento se insertará un mensaje.
- errorElement(): permite definir el elemento que contendrá el texto del mensaje a mostrar.
- wrapper(): envuelve la etiqueta definida en errorElement dentro de la que especifiquemos.
Básicamente lo que hemos hecho con ellos es indicar que en el elemento html <ul> que se encuentra dentro de contenedor con id 'divErrores' (un <div>) se insertarán los mensajes de error que se produzcan en etiquetas <span> dentro de elementos de la lista (<li>).
Para que lo entiendas mejor observa cómo Validate ha generado el código HTML:
Ya por último, tal y como hemos comentado anteriormente podemos agregar nuevas validaciones a JQuery Validator. Para ello haremos uso de su método addMethod().
En el siguiente código fuente de ejemplo (es recomendable ponerlo en un archivo javaScript aparte) creamos un nuevo método llamado letras_espacios() en el que sólo se admitirá que el componente contenga letras en mayúsculas o minúsculas y espacios:
jQuery.validator.addMethod("letras_espacios", function(value, element) {
return this.optional(element) || /^[a-zA-Z\s]+$/.test(value);
}, "Sólo letras y espacios");
Si compruebas que no te funcionan bien las expresiones regulares asegúrate de guardar el archivo con codificación UTF-8.
Vea también: [ Documentación ] - [ Otras opciones de configuración ] - [ Repositorio oficial ]
Vea también: [ Expresiones regulares en JavaScript ]
