Hola a todos, en esta ocasión veremos como validar un formulario HTML con la librería
jQuery y usando un plugin llamado
Validate.
Para esto necesitamos los siguientes archivos:
- jQuery: El cual pueden descargarlo desde Aqui
- Validate: El plugin de validacion basado en la libreria jQuery, este plugin lo pueden descargar de este enlace.
- validacion.js: Este archivo es el que nosotros crearemos.
Manos a la obra:
Primero el script o codigo html de la pagina con el formulario que vamos a validar.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/validar.js"></script>
</head>
<body>
<form id="form1" name="form1" method="post" action="www.google.com">
<p> </p>
<p>
<label>nombre
<input type="text" name="nombre" />
</label>
</p>
<p>
<label>email
<input name="email" type="text" id="email" />
</label>
</p>
<p>
<label>contraseña
<input type="password" name="pass" id="pass" />
</label>
</p>
<p>
<label>Repetir Contraseña
<input type="password" name="pass2" id="pass2" />
</label>
</p>
<p>
<label>
<input type="submit" name="button" id="button" value="Enviar" />
</label>
</p>
<p> </p>
</form>
</body>
</html>
Lo que nos interesa es el formulario y los componentes, controles o etiquetas que lo conforman, como por ejemplo:
id="form1"
<input type="text" name="nombre" />
<input name="email" type="text" id="email" />
<input type="password" name="pass" id="pass" />
<input type="password" name="pass2" id="pass2" />
Se debe poner atencion a los valores que tienen por "
id" y
"name", porque son estos valores los que usaremos en la validacion.
Dentro de las etiquetas "head" del documento html, debemos incluir los archivos que valos a usar, como son:
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/validar.js"></script>
</head>
Primero se debe incluir la libreria jquery., luego el plugin y despues el archivo que nosotros vamos a crear, el cual es validar.js.
Los Archivos con extension "js", los he colocado dentro de una carpeta llamada "js", para tener en orden nuestro archivos, es por eso que cuando incluimos los archivos usamos "js/elarchivoaincluior", donde "js" es el directorio o carpeta donde se ubican los script o archivos a incluir.
Ahora el script validar.js
$(document).ready(inicio);
function inicio()
{
$("#form1").validate
(
{
rules:
{
nombre: {
required: true
}
,
email: {
email:true
}
,
pass: {
required:true,
minlength:8
}
,
pass2: {
required:true,
equalTo: "#pass"
}
}
,
messages:
{
nombre: {
required: "* Debe Llenar este campo"
}
,
email: {
email:"Debe ingresar una direccion de correo valido"
}
}
}
);
}
El resultado sera el siguiente:
Explicacion del Script:
$(document).ready(inicio);
Con esto le indico que cuando la pagina este lista, ejecuta la funcion inicio.
Dentro de la funcion inicio se encuenta la validacion del formulario.
$("#form1").validate({reglas,mensajes})
En la linea de
$("#form1") indicamos que el formulario que contenga el id form1, sea el que recibira o donde se aplicara la validacion.
dentro de validate(), recibe las reglas de validacion y los mensajes a mostrar, sino se colocan los mensajes a mostrara apareceran los mensajes por defecto, que estan en ingles.
rules:
{
Nombrecampo: {
instruccion:valor,
instruccion2:valor2
}
}
En el codigo anterior lo que haces es definir las reglas por cada campo que contenga el formulario, indicando para ellos el nombre del campo y dentro de llaves las instrucciones de la validacion, si son varios campos, estos se separan por una coma.
rules:
{
nombre: {
required: true
}
,
email: {
email:true
}
,
pass: {
required:true,
minlength:8
}
,
pass2: {
required:true,
equalTo: "#pass"
}
}
Para separar el bloque de reglas de validacion y los mensages de validacion, se usa la coma.
rules:
{
aqui las reglas de validacion
}
, //separadas por una coma
messages:
{
aqui los mensajes
}
Y finalmente el apartado de los mensages de nuestro script
messages:
{
nombre: {
required: "* Debe Llenar este campo"
}
,
email: {
email:"Debe ingresar una direccion de correo valido"
}
}
Sino se incluye ningun mensaje para un campo validado, entonces se mostrara el mensaje por defecto.
Explicacion de las instrucciones de validacion:
required:true Quiere decir requerido, que debe ser ingresado si o si.
email:true Quiere
decir que debe ser ingresado un email(correo) valido.
minlength:8 Que el numero de digitos minimos a ser ingresado debe ser 8.
equalTo: "#pass" Igual a, quiere decir que este campo tiene que ser igual a otro campo, pasado como parametro el id del campo, en este caso el id del campo es pass.
Para mas informacion sobre las instrucciones de validate, pueden ingresar a la pagina oficial de jQuery y buscar el apartado del plugin Validation.
Nos vemos... hasta otra oportunidad.
