Validación de formularios html con jquery

Para empezar  hay que tener en cuenta  el conocimiento  básico de CSS y jquery  a un que el  ejemplo que se dará   a continuación   es demasiado básico .
hay que tener en cuenta    que utilizaremos la  siguiente  librerías.
jquery-1.8.2.min.js
jquery.validationEngine.js
y para los mensajes  en español  utilizaremos un java script    "jquery.validationEngine-es.js"

Clic aqui para ver demo

1. Lo primero que hacemos  como  muchos lo imaginaran es  llamar la ruta de las librerías a la pagina entre el head .

 2.Hay q' llamar  de igual manera el css q' utilizaremos

validationEngine.jquery.css: Este estilo se utiliza para  los mensajes  si en  cual quier momento tenemos la necesidad de modificar  colores   o fuentes  o en su defecto  modificar desde hay se puede  hacer.

template.css: En este css  podemos modificar  el estilo  de la  pagina en general   como  el estilo de  los botones ,  cajas de texto, fuentes, etc.

3.colocamos  al

 de nuestro formulario un id y un name  para  q' podamos referirnos a el tanto en los scripts como en los  css  de  la manera  q se nos ocurra  en particular llamare  al mio de esta manera  formID nos  aseguramos   q  este form tenga una redirección , un action  a alguna pagina  o postback en el caso q estemos utilizando asp .

En  este caso   lo direccione  a la misma  pagina  solo  por q es un ejemplo  pero  lo puedes  hacer   a una  pagina  php o  lo que  se necesite .

.

 4. despues  de  esto  creamos  un script  donde   le  decimos  a la  librería q' ya tenemos  q  el lo que tiene q validar  esto lo hacemos  en la misma  pagina.

 De  esta manera el jquery validara   lo que este entre el  formulario cuando se de clic en el boton enviar

5. en este  punto  validaremos  como lo necesitemos  con esto ya seria  algo facil

     *que el campo sea obligatorio . para esto simplemente colocamos  una clase  así                  : class="validate[required] text-input"

*si deseo validar un campo de texto como  correo y que sea  obligatorio  entonces :class="validate[required,custom[email]] text-input"

* en el caso de que  necesitemos  un campo obligatorio y q sea numérico  lo hice de esta manera:class="validate[required , custom[integer]] text-input"
* si lo que necesitamos  validar  es un select o un dd  en este caso es mejor dejar el primer value vacio  pero si colocarlo  y de  resto seria  normal
y para hacerlo obligatorio simplente colocamos  el class  como  se ve  a continuación

*Si lo que se necesita es  validar un  radio   entonces  sera de esta manera

lo  único que hay q tener en cuenta es que el name lo llamaremos igual y la clase que le colocamos es  class="validate[required] radio" y ya  de esta manera  validamos  de una  forma muy sencilla que  nos ahorrara algo de tiempo :

* En caso  de que  sea  un checkbox   es muy parecido   en el caso   de que digan   de un grupo de checkbox seleccione maximo 2  entonces  se lograria  de esta manera  class="validate[maxCheckbox[1]] checkbox"
es claro que si se  cambia   el numero en el validate  se puede  ampliar el rango segun lo que necesite ejemplo class="validate[maxCheckbox[5]] checkbox"

* en el  caso  de que  no sea  el máximo   si no el mínimo es decir q  sea obligatorio seleccionar por lo menos  1 entonces  es muy   parecido

*si  solo queremos  que el checkbox  sea  obligatorio   creamos  uno normal y le colocamos una  clase  de requerido 

*un file se valida exactamente  q si fuera un text  en el caso de que  fuera  un valor requerido

asi se ve   el formulario  si no  se llena nada  con algo de estilo

 clic aqui si quieres descargar el ejemplo 

Clic aqui para ver demo