Ventana de Diálogo con HTML – jQuery – jQuery UI + Formulario + jQuery.Validate

/, Desarrollo Web, jQuery/Ventana de Diálogo con HTML – jQuery – jQuery UI + Formulario + jQuery.Validate

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

 

By | 2018-03-25T22:33:42+00:00 marzo 12th, 2012|Categories: CSS, Desarrollo Web, jQuery|Tags: |31 Comments
Desarrollador web front y back end, php, mysql, css3, html5, twitter bootstrap, jquery . . . twitero, bloguero, consultor de IT y padre de dos hermosos bodoques. Visita mi Perfil en Google +

31 Comments

  1. Erufenix Sanjuro Tadoroko 13 marzo, 2012 at 9:50 AM

    Buen post, pero donde estas usando eso de los metadatos que dices?

    • Luis Fernando 13 marzo, 2012 at 12:58 PM

      Hola @erufenix los metadatos se usan en los inputs, que es donde se dan las opciones para la validación de los campos

      <input type="text" id="rg_nombre" name="rg_nombre" class="{required:true}"/>

      Gracias por tus comentarios

      Saludos

  2. […] Acerca de « Ventana de Diálogo con HTML – jQuery – jQuery UI + Formulario + jQuery.Validate […]

  3. […] Diálogo con HTML – jQuery – jQuery UI + Formulario + jQuery.Validate III Tweet En los post Ventana de Diálogo con HTML – jQuery – jQuery UI + Formulario + jQuery.Validate y Ventana de Diálogo con HTML – jQuery – jQuery UI + Formulario + jQuery.Validate II hemos […]

  4. FERNANDO PAREDES 28 julio, 2012 at 8:58 PM

    hola que tal luis como estas, primeramente dejame felicitarte por tu pagina esta buenisima tiene buenos temas y de actualidad,
    queria hacerte una consulta.

    como lo haria funcionar con las funciones buttons que viene los formularios ui de jquery,

    gracias

    • Luis Fernando Cázares 28 julio, 2012 at 10:31 PM

      Hola Fernando buenas noches, antes que nada muchas gracias por tus comentarios, son un buen aliciente para continuar escribiendo y compartiendo con la comunidad.

      En cuanto a tu pregunta, entiendo que deseas crear una ventana modal con un formulario y en lugar de agregar el botón común del form deseas poner no se tal vez un par de botones con el jQuery UI y que cada uno de estos ejecute una acción con los campos del mismo?

      Por favor hazme saber si es correcto lo que entendí, para publicar un ejemplo de este tipo.

      Saludos

  5. Nadia 4 septiembre, 2012 at 6:11 PM

    Hola, muy buen post!
    Ya se publico el ejemplo que mencionabas con los botones de jQuery UI??

    • Luis Fernando Cázares 4 septiembre, 2012 at 6:20 PM

      Hola Nadia muchas gracias por tan positivos comentarios, en breve estaré publicando los nuevos post y screencast

      Saludos

  6. Nicolas 23 octubre, 2012 at 3:28 PM

    Hola,
    Puedes ayudarme a ver por que no aparece el dialogo centrado en mi página, este es mi código:

    $(“#dialog-message”).dialog({
    draggable: false,
    height: 200,
    modal: true,
    show: “fold”,
    hide: “slide”,
    buttons: {
    Ok: function() {
    $(this).dialog(“close”);
    }
    }
    });

    • Luis Fernando Cázares Bulbarela 23 octubre, 2012 at 10:15 PM

      Hola buenas noches Nicolás, muchas gracias por seguir mis publicaciones, en cuanto a lo que me preguntas, ya puse el código en un script mío y funciona correctamente, quiero suponer que estas haciendo un resize a tu ventana y por eso no se centra.

      Saludos

      • Nicolas 24 octubre, 2012 at 12:44 PM

        Exactamente a que te refieres con un resize?

        • Luis Fernando Cázares Bulbarela 24 octubre, 2012 at 1:11 PM

          Hola de nuevo Nicolas, me refiero a que si una vez que se esta mostrando tu ventana, haces pequeña la ventana de tu navegador . . .

          Saludos

          • Nicolas 24 octubre, 2012 at 2:28 PM

            Hola, no hago nada de eso, la verdad no se si es por que se trata de una pagina de un sistema web y tal vez le este afectando algún estilo. Sigo buscando, si encuentro la respuesta, te la comparto.
            Gracias.

  7. Marlon 21 noviembre, 2012 at 9:36 AM

    Hola luis, excelente tema….no se, si me podrias ayudar…
    tengo un dialog que me carga la info de otra pagina
    $(“#formulario”).load(“le asigno la ruta/variables etc”)

    En dicho dialog le agregue buttons uno de eso buttons es Guardar como podria validar yo usando ese boton(guardar) con jquery validate sabiendo que estoy mostrando en el dialog de un archivo.php que esta en otra ruta

    • Luis Fernando Cázares Bulbarela 21 noviembre, 2012 at 9:52 AM

      Hola Marlon buenos días, muchas gracias por seguir mi blog, en lo que me comentas tendrías que usar forsozamente los botones del formulario y evitar los botones que puedes poner en los dialog, recuerda que jQuery validate funciona con formularios.

      Espero haber ayudado, si tienes alguna duda podemos hacer un hangout y te explico mejor, chance y hasta te muestro como lo manejo.

      Saludos

      • Marlon 21 noviembre, 2012 at 10:55 AM

        gracias luis ya pude resolver el problema utilize lo siguiente

        if($('#frm_actualiza_clientes').validate().form()==false)
        {
        jAlert("verifique los campos requeridos","Error")
        return false;
        }

  8. Alejandro 21 noviembre, 2012 at 2:28 PM

    Hola buen dia Luis, en verdad muy buena tu web la verdad, me sirvió tu ejemplo para poder guiarme a realizar un formulario con validación.

    Vengo con la molestia en ver si me podrías guiarme en cómo poder imprimir una consulta realizada en jquery, pues no logro dar con el clavo :/

    mira el código donde se carga todo es esto:
    if(cadena!=””){
    $(“#consulta”).val(“SELECT “+cadena+” FROM “+tablas+where);
    }

    y donde lo recibo es en esta textarea:

    pero quiero crear un botón que me diga algo como “Consultar” y que al momento de presionar ahí, me lleve la consulta que se me muestra en el textarea :/

    Espero haberme dado a entender :/
    Desde ya muchas gracias y sigue así con tus aportes amigo 😀

    • Luis Fernando Cázares Bulbarela 21 noviembre, 2012 at 2:55 PM

      Hola Alejandro buenas tardes, para que mas o menos te des una idea de lo que debes hacer checate est tutorial jQuery AJAX para Realizar Consultas con PHP y MySQL te puede servir muchísimo.

      Si tienes mas dudas no dudes en contactarme y hacemos un hangout si gustas.

      Saludos

      • Alejandro 21 noviembre, 2012 at 3:14 PM

        Muchas gracias Luis, en uno momento que llegue a casa veo los videos, pues aquí en la U nos tienen bloqueadas ciertas páginas (dígase youtube XD) por cuestiones de recursos y ancho de banda jejejeje
        Pero igual, cualquier cosa vengo y te aviso vale 😀
        Muchas gracias 😀

  9. Ramón Ocampo 3 diciembre, 2012 at 11:43 PM

    Hola, necesito hacer lo siguiente.

    tengo un formulario, abro una ventana modal para buscar los clientes de nombre Luis, cuando encuentro 5 nombres selecciono uno y el ID del seleccionado necesito dejarlo en el formulario inicial, para luego guardarlo en MySQL, cómo se hace eso con JQuery UI?, gracias

    • Luis Fernando Cázares Bulbarela 4 diciembre, 2012 at 9:51 AM

      Hola buenos días Ramón, muchas gracias por visitar mi blog, mira por el momento no tengo un ejemplo, pero es una excelente idea, no te prometo a corto plazo tenerlo, lo que si explicarte en este comentario estaría un poco extenso y enredoso, si gustas podemos hacer un hangout uno de estos días y con gusto te explico.

      Saludos

  10. alexander 30 agosto, 2013 at 1:09 AM

    Hola Luis muy buena pagina la verdad muy interesante, me contacto contigo porque me gustaria saber como hacer un cuadro emergente con boton de guardar y cancelar

    • Luis Fernando Cázares Bulbarela 30 agosto, 2013 at 8:17 AM

      Hola buenos días Alexander, muchas gracias por tus comentarios, en cuanto a lo que necesitas te sugiero no utilizar los botones del dialog, mejor inserta el formulario con sus respectivos botones uno tipo submit y otro tipo button de tal manera que a este último le generes un evento onClick y cierres el diálogo.

      Saludos

  11. Lalytto 1 septiembre, 2013 at 12:34 PM

    Saludos Luis, tengo una pregunta que espero me puedas ayudar.
    Estoy haciendo un formulario para logearme pero cuando paso a abrir mi ventana modal no me permite escribir en éste.

    ¿Olvidaste tu contraseña?
    Continuar

    Le he puesto jqueryUI también bootstrap. Espero me puedas ayudar.
    Gracias (y).

    • Luis Fernando Cázares Bulbarela 1 septiembre, 2013 at 5:47 PM

      Hola buenas tardes Lalytto por lo que me comentas creo que es un problema de sintaxis de HTML5 y javascript, te sugiero hagas tu ejercicio paso a paso de tal manera de que vayas viendo como se comporta y detectes el error, una herramienta muy útil para ir viendo el código fuente y si hay errores es firebug.

      Saludos

  12. Lalytto 1 septiembre, 2013 at 12:40 PM

    Además no me muestra ni el mensaje de “placeholder”

  13. Lalytto 1 septiembre, 2013 at 8:20 PM

    Eso mismo pensé pero no creo que sea error de sintaxis. Pienso que sea algo de las posiciones con z-index entre Bootstrap y jQueryUI

Comments are closed.

Desarrollo Web

Silex - Sistema de Registro