Validar formularios con Jquery

P

ara poder validar los campos de un formulario con jQuery desde el lado del cliente, lo primero que debemos hacer es descargar la librería jQuery, en caso de no tenerla, desde la página oficial del proyecto y segundo descargar el publing validate desde aquí.

Para poder usar el pluging validate lo único que debemos hacer es mover el contenido de los ficheros descargados, por ejemplo, a la carpeta js y estará listo para usar.

El código que debemos añadir al HTML es:
Dentro de la cabecera

//realizar una llamada a la librería jQuery y a Validate
<script language="javascript" src="js/jquery.js"></script>
<script language="javascript" src="js/jquery.validate.js"></script>

<script type="text/javascript">
//Una vez que se cargue la primera parte de la página ya se podrá usar la librería
 $().ready(function() {
  // validate the comment form when it is submitted
  $("#Forms").validate();
 });
</script>

//Le damos formato a los mensajes de error
<script type="text/css">
#Forms label.error {
margin-left: 10px;
width: auto;
display: inline;
color: red;
}
</script>

Dentro de los imputs que queramos validar del formulario debemos tener cuidado de que su marca name tenga el mismo valor que dentro de la función de del plugin Validate

<td class="obligatorio">Nombre (Obligatorio)</td>
<td>
<input id="cname" name="name" class="required" minlength="2" />
</td>

Donde class="required" significa que el parámetro es obligatorio, pudiendo añadir más restricciones a continuación.

En la documentación oficial tendremos las especificaciones de todas las funciones que se pueden usar, e incluso podréis añadir vuestras propias funciones para realizar validaciones que no estén incluidas.

En este blog podéis encontrar funciones añadidas para completar las validaciones en formularios.
Validar DNI en formularios
Validar Fecha en formularios
Validar Email en formularios
Validar Número de cuenta bancaria en formularios