Como ya había comentado con anterioridad en el post Ventana de Diálogo con HTML – jQuery – jQuery UI hoy en día las aplicaciones web deben ser muy parecidas a sus predecesoras versiones de escritorio, ya vimos como crear Ventana de Diálogo jQuery – jQuery UI + AjaxUsando jQuery.ajax (Ventana de Diálogo + Pre-Loader) , ahora vamos a implementar un formulario entro de una ventana de diálogo usando los mismos conceptos, en esta primera entrega crearemos el formulario y lo validaremos, mas adelante crearemos su procesamiento por medio de AJAX.

Para este ejemplo utilizaremos  jQuery plugin: Validation el cual nos ayudará a validar nuestros formularios, es importante mencionar que debemos validar los campos también del lado del servidor para obtener mejores resultados.

En el link antes mencionado se encuentra toda la documentación y ejemplos, hay que descargarlo e incluirlo en nuestra carpeta js.

Puedes descargar el código completo desde github

Video Tutorial

Cargar CSS y javascript (jQuery, jquery UI, jQuery Validate, jQuery metadata)

Se incluyen dos nuevos scripts, el plugin jQuery Validate para controlar nuestro formulario y jQuery Metadata que nos sirve para la la extracción de metadatos de las clases, atributos al azar, los elementos secundarios y atributos de HTML5 de datos *, mas adelante explicaremos el proceso para validar el formulario.

Ventana de diálogo + Formulario

Posterior a la etiqueta body creamos un div que contiene el formulario al cual le hemos creado un id=”formAjax” el cual nos servirá para hacer referencia a la hora de validarlo

CSS

Damos formato al HTML y al formulario a presentar

Creación de la ventana de diálogo

Creamos el código javascript para crear la ventana de diálogo

Validamos el Formulario

Agregamos el siguiente código javascript que nos permitirá validar el formulario contenido en la ventana modal

En este caso usaremos dos opciones, submitHandler que se ejecuta cuando el formulario es válido, en este caso lo único que haremos es serializar todos los campos y mostrar en pantalla el resultado; y errorPlacement que se ejecuta cuando el formulario no es válido, en este caso estamos indicando que muestre el error en el span previo al input que presente un error.

Modificaciones en el formulario para su correcta validación

Como lo comenté, usaremos el plugin jQuery Metadata que nos permitira extraer metadatos del atributo class de nuestros inputs, en este caso estamos indicando que los campos nombre, apellidos son requeridos; y el campo correo electrónico es requerido y de tipo email. En la documentación del plugin encontraras todos los tipos de datos que se pueden validar, la verdad esta muy completo.

Como se puede ver, previo a la etiqueta input, coloqué una etiqueta span en la cual se insertará el mensaje de error en caso de que los datos no sean correctos para cada campo.

Funcionamiento

Para probar nuestro código ejecutamos el archivo dialogoFormulario.html, damos click sobre el botón Diálogo Sencillo Formulario, para saber si se esta validando, sin llenar datos hacemos click en Continuar y aparecerán los mensajes de error correspondientes, continuamos llenando los campos y volvemos a hacer click en el Continuar, en este momento se serializa el formulario y se envía la cadena en un alert.

Archivo HTML + Ventana de Diálogo + Formulario

Archivo dialogoFormulario.html completo

Ventana de Diálogo con Formulario

HTML / jQuery / jQuery UI

button dialog jQuery Validate

Diálogo Sencillo Formulario

cazaresluis.com