Validar formulario con jQuery Validate y procesar con Ajax

Un aspecto importante que da más profesionalidad a nuestras Webs es validar los formularios en vivo (jQuery Validate). La validación se puede realizar en el servidor tras enviar los datos o en el cliente antes de enviar.

En este artículo vamos a ver como validar un formulario en el cliente antes de enviar los datos con jQuery Validate y procesarlos en el servidor mediante las técnica Ajax sin recargar la página.

Es probable que usando solamente jQuery no puedas crear fácilmente las funciones para validar los campos de tus formularios. jQuery Validate es una biblioteca estándar de métodos de validación (como correos electrónicos, url, números de tarjeta, etc.). Puedes colocar mensajes en el DOM con posibilidad de ocultarlos y mostrarlos cuando corresponda.

Este plugin pueede ser muy útil cuando necesitas establecer diferentes formas de especificar las reglas de validación de acuerdo con el entorno del lado del servidor y no quieres reinventar la rueda.

Hay muchas soluciones no basadas en jQuery para validar los formularios pero estoy seguro que dejarás de usarlas si acabas conociendo jQuery Form Validation que no es más que uno de los plugins jQuery más antiguos para la validación de datos (comenzó en 2006) y ha demostrado su eficacia en proyectos de todo el mundo.

jQuery Validate

Para validar un formulario con jQuery Validate debemos añadir en el <body> de nuestra página un formulario HTML simple como por ejemplo el siguiente:

<form method="post" id="formid">
    <div id="ok"></div>
    <p><span>Nombre</span>
    <input type="text" name="name" id="name" /></p>
    <p><span>Apellidos</span>
    <input type="text" name="lastname" id="lastname" /></p>
    <p><span>Email</span>
    <input type="text" name="email" id="email" /></p>
    <p><span>Teléfono</span>
    <input type="text" name="phone" id="phone" /></p>
    <p><span>Edad</span>
    <input type="text" name="years" id="years" /></p>
    <p><span>Mensaje</span>
    <textarea id="message" name="message" rows="5" cols="53"></textarea></p>

    <input type="submit" value="Enviar" style=" margin-left:565px;" />
</form>

Se trata de un formulario simple con sus inputs: nombre, apellido, email, teléfono, edad y mensaje. Tiene un botón de tipo submit y un contenedor con id=”ok” donde depositaremos mediante las técnica Ajax la respuesta del archivo PHP.

Dentro de la etiqueta <head> deberemos incluir la librería jQuery, el plugin jQuery Validate y su llamada + los estilos necesarios que ya cada uno los apaña a la Web que esté maquetando.

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#ok").hide();

    $("#formid").validate({
        rules: {
            name: { required: true, minlength: 2},
            lastname: { required: true, minlength: 2},
            email: { required:true, email: true},
            phone: { minlength: 2, maxlength: 15},
            years: { required: true},
            message: { required:true, minlength: 2}
        },
        messages: {
            name: "Debe introducir su nombre.",
            lastname: "Debe introducir su apellido.",
            email : "Debe introducir un email válido.",
            phone : "El número de teléfono introducido no es correcto.",
            years : "Debe introducir solo números.",
            message : "El campo Mensaje es obligatorio.",
        },
        submitHandler: function(form){
            var dataString = 'name='+$('#name').val()+'&lastname='+$('#lastname').val()+'...';
            $.ajax({
                type: "POST",
                url:"send.php",
                data: dataString,
                success: function(data){
                    $("#ok").html(data);
                    $("#ok").show();
                    $("#formid").hide();
                }
            });
        }
    });
});
</script>

En el código anterior nos tenemos que fijar especialmente en la llamada a la función validate(). Estamos indicando que cuando se pulse el botón del formulario con id=”formid”, establecemos unas normas para cada campo como por ejemplo que el campo nombre sea requerido y de al menos 2 caracteres. Seguidamente también añadimos los mensajes de error de cada campo y finalmente con submitHandler añadimos el código que procesará el formulario si todo cumple con las normas establecidas.

Puedes ver más documentación en página oficial para ver por ejemplo que reglas se pueden añadir a los campos.

El código Ajax lo que hace es recibir los datos del formulario y construimos una cadena que los contiene para pasarlos mediante el método POST al archivo PHP.

El mensaje de confirmación del envío es retornado desde el archivo PHP y se captura en el success del Ajax donde estamos depositando dicho mensaje en el contenedor de confirmación que inicialmente está oculto haciéndolo visible y ocultando el formulario.

Ahora solo faltará crear un archivo PHP que llamaremos “send.php” que se encargará de procesar los datos ya sea introduciéndolos en una base de datos, guardándolos en un archivo o enviándolos por email. En el ejemplo en funcionamiento tan solo mostramos un mensaje de salida pero podrías hacer todas las funciones que te permite PHP como por ejemplo, enviar la información por email, guardar la información  en la base de datos, etc.

<?php
echo 'Gracias '.$_POST['name'].' '.$_POST['lastname'].'. La información ha sido enviada correctamente!';
?>

Ver el ejemplo en funcionamiento

Esta entrada ha sido actualizada el 10/07/2018.

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (17 votos, promedio: 4,53 de 5)
Cargando…

Comparte en las redes sociales

Escrito por Jose Aguilar - Experto programador Prestashop y Wordpress.

35 respuestas a “Validar formulario con jQuery Validate y procesar con Ajax”

  1. Validar formulario con jQuery Validate y procesar con Ajax | Jose Aguilar - AppWebsLima dice:

    […] See on Scoop.it – Sergio LimaSee on http://www.jose-aguilar.com […]

  2. Hernan dice:

    Buenos días Jose. Te cuento que estoy intentando realizar es validar un input array de X numeros de solicitudes que se ingresan. He probado opciones como

    rules: {
    ‘nro_sol[]’: { required: true, minlength: 2},

    Pero ninguna funciona. ¿Es posible hacer lo que quiero? Desde ya, muchas gracias, saludo afectuoso

  3. Andres Restrepo dice:

    hola Como puedo envair los datos por ajax si estoy usando

    errorPlacement: function(error, element)
    $(“#Error”).show();
    $(“#Error”).append(error);
    para unifcar todos los mensajes en un solo div, pero no veo forma de activar el ajax despues de completar la validaciòn
    solo funciona con submitHandler

    gracias

  4. Andres Restrepo dice:

    hola Como puedo envair los datos por ajax si estoy usando

    errorPlacement: function(error, element)
    $(\"#Error\").show();
    $(\"#Error\").append(error);
    para unifcar todos los mensajes en un solo div, pero no veo forma de activar el ajax despues de completar la validaciòn
    solo funciona con submitHandler

    gracias

  5. Tania Maria dice:

    Está Perfecto muchas gracias.

    Solo hay un detalle, se debe dejar el div fuera del form =)

    Saludos.

  6. julio perea dice:

    Hola jose muy interesante tu pagina haces un gran aporte a la comunidad, estoy comenzando a ver algo de ajax y queria implementar este scrip en una de mis paginas y resulta que no se envian los datos mediante el post te dejo el codigo fuente a ver si me podes ayudar desde ya muchas gracias..

    Documento sin título

    $(document).ready(function() {
    $(“#ok”).hide();

    $(“#formid”).validate({
    rules: {
    name: { required: true, minlength: 2},
    lastname: { required: true, minlength: 2},
    email: { required:true, email: true},
    phone: { minlength: 2, maxlength: 15},
    years: { required: true, number: true},
    message: { required:true, minlength: 2}
    },
    messages: {
    name: “Debe introducir su nombre.”,
    lastname: “Debe introducir su apellido.”,
    email : “Debe introducir un email válido.”,
    phone : “El número de teléfono introducido no es correcto.”,
    years : “Debe introducir solo números.”,
    message : “El campo Mensaje es obligatorio.”,
    },
    submitHandler: function(form){
    form.submit ();
    // $(‘#formid’).submit(function(){
    // var dataString = “name=”+$(“#name”).val()+”&lastname=”+$(“#lastname”).val();

    var dataString = $(‘this’).serialize();
    // var dataString = ‘name=’+$(‘#name’).val()+’&lastname=’+$(‘#lastname’).val()+’&email=’+$(‘#email’).val()+’&phone=’$(‘#phone’).val()+’&years=’$(‘#years’).val()+’&message=’$(‘#message’).val();
    //”&mensaje=” +escape ( $ ( ‘#ContactMessage’ ) . val ( ) )
    $.ajax({
    type: “POST”,
    contentType: “application/x-www-form-urlencoded”,
    url:”prueba.php”,
    data: dataString,

    success: function(data){
    $(“#ok”).html(data);
    $(“#ok”).show();
    $(“#formid”).hide();
    }
    });
    }
    });
    });

    Nombre

    Apellidos

    Email

    Teléfono

    Edad

    Mensaje

  7. adriana dice:

    Hola Jose disculpa, los archivos a los q haces referencia en el head, jquery.validate.js y jquery-1.4.2.min.js donde los consigo???

  8. yickson dice:

    Buenos días, una pregunta amigo en la parte de Rules Jquery validation se guía por el name en la etiqueta HTML o por el id de esa misma etiqueta aclarame esa pregunta, ya que verás mi formulario todos tienen un nombre como form[‘4’] con un numero adentro para yo hacer una automatizacion de variables pero requiero saber si debo agregar un id para que este plugin funcione correctamente.

  9. Julián martinez dice:

    Buenos días,

    Estaba tratando de realizar la prueba, pero no me esta funcionando me esta saliendo un error.Uncaught TypeError: undefined is not a function. http://prntscr.com/45w4zc quien me puede ayudar?? Soy nuevo en esto 🙁

  10. luis dice:

    Muy buenas, una consultita, cómo hago para validar y enviar una imagen con el mismo método?
    rules: {
    field: {
    required: true,
    accept: “jgp|jpeg|png”
    }
    he visto esto pero no me está funcionando, lo que entiendo es como llevar ese dato a php, los demás campos si llegan correctamente.
    Gracias

    $(document).ready(function() {
    $(“#mensaje”).hide();

    $(“#datosAlumnos”).validate({
    rules: {
    nombre: { required: true, minlength: 2},
    profesor: { required: true, minlength: 2},
    descripcion: { required: true, minlength: 2},
    email: { required:false},
    fecha: { required:true},
    link: { required: false},
    portada: {
    required: true,
    extension: “png|jpeg|jpg|gif”
    }
    /*portada: { required: true}*/
    },
    messages: {
    nombre: “Debe introducir su nombre.”,
    profesor: “Debe introducir profesor.”,
    email : “Debe introducir un email válido.”,
    descripcion : “debe añadir descripcion.”,
    fecha: “Debe introducir fecha.”
    // portada: “El campo portada es obligatorio.”,
    },
    submitHandler: function(form){
    /* var dataString = ‘nombre=’+$(‘#name’).val()+’&lastname=’+$(‘#lastname’).val()+’…’;*/
    var dataString =’nombre=’+$(‘#nombreAlumno’).val()+’&email=’+$(‘#correoAlumno’).val()+’&descripcion=’+$(‘#descripcionAlumno’).val()+’&link=’+$(‘#linkAlumno’).val()+’&fecha=’+$(‘#fechaAlumno’).val()+’&profesor=’+$(‘#profesorAlumno’).val()+’&portada=’+$(‘#portada’).val()
    $.ajax({
    type: “POST”,
    url:”inc/anadir.php”,
    data: dataString,
    success: function(data){
    $(“#mensaje”).html(data);
    $(“#mensaje”).show();
    $(“#datosAlumnos”).hide();
    }
    });
    }
    });
    });

  11. Eduardo Mena dice:

    Que tal José, estoy teniendo problemas, no me estan llegando los datos a mi archivo .php.

  12. Xavier dice:

    Hola José,

    Como podría incluir en este código que se pueda enviar un fichero adjunto? lo estoy intentando y no hay manera.
    Añado el campo en el data seguido de los demás y pongo el multipart correcto, pero entonces lo envía en blanco.
    el problema es la librería que no deja?
    Saludos, gracias de antemano.

    • Jose Aguilar dice:

      HOla buenas tardes,

      NO lo he probado pero diría que no se puede hacer con jQuery Validate si quieres incluir un archivo. Necesitas validar el formulario con PHP en este caso.

      Saludos

  13. Heri dice:

    Hola que tal!!
    Quiero validar en mis formularios todos los campos, por ej. Validar que se ingrese una clave, clave compuesta, de producto con un formato definido; que inicie con un determinado número de letras, que ya estén definidas, como ejemplo: vk2324 (V = Venta, K = Casquillo). Seguidas de 4 dígitos como ya se mostró. Ya lo valido a la hora de que el usuario presiona el boton enviar, llamando a la función JS en el ‘onsubmit’ pero necesito que ahora se valide ese campo cuando se escribe la clave. En resumen que si el usuario escribe una clave de producto que no existe en la Base de Datos el sistema le avise que es clave escrita no existe y tengo el mismo caso a la hora de que el usuario se logea en el sistema.
    Cualquier sugerencia es bienvenida al igual que cualquier crítica constructiva.
    Saludos!!!

  14. Marcelo dice:

    Hola José gracias por el código resulta de maravilla, solo hay un pequeño detalle al insertar el html despues de recibir los datos de php no mantiene el formato de las clases que las estoy manejando con bootstrap, osea pierden los efectos etc. como puedo solucionar esto. Segun vi con el metodo .on de jquery pero como adaptarlo al validate. Gracias!!!

  15. francisco dice:

    hola Jose,

    gracias por tus consejos, pero tengo un detalle, descargue una plantilla web y la estoy modificando, hice un formulario y estoy siguiendo tal cual los paso que pones para validarlo, pero si lo hago en una pagina nueva sin codigo mas que el tuyo si fuciona, si copio y pego ese mismo codigo en el body de la plantilla y el script de jquery en el head no hace nada… que me sugieres??

    • Jose Aguilar dice:

      Hola,

      No te lo puede asegurar 100% pero creo que el jQuery que se utiliza en la plantilla no debe ser compatible con este validador.

      Puedes hacer 2 cosas: actualizar el plugin del validador buscando actualización en su página oficial o utilizar el jQuery que utiliza este ejemplo.

      Espero haberte ayudado,
      Saludos

  16. Fernando dice:

    Hola buenos días, mira te quería consultar por lo siguiente..
    Hace tiempo utilizo esta clase y quiero agregarle que cuando valide los campos mientras envía la info al php (el cual envía el mail) y hace todo lo necesario eso tarda unos segundos dependiendo la conexión de las personas y me gustaría una vez validado todo de forma correcta poder hacer aparecer un gif de cargando o un mensaje.. Si me puedes ayudar en eso te lo agradecería infinitas veces!

    Saludos Fernando.

  17. Roni.J dice:

    hola que tal soy nuevo en esto de la programación como seria el archivo php para que aga el inserto a la base de datos

  18. Enrique dice:

    Disculpa pero si no deseo usar un submit y si un button como afectaria el codigo?
    Gracias de antemano y buen trabajo

  19. javier dice:

    hola muy interesante el articulo, lo estoy probando en un sitio de una sola pagina con los respectivos controles de campos, al procesar el form queda en enviando mensaje y nada mas, podrias darme una mano con esto o indicarme donde lo puedo ver. Saludos

  20. Pablo dice:

    pero, cómo obtienes los valores que envias en data (data: dataString) en el formulario php?

    • Jose Aguilar dice:

      el dataString es una variable que creamos para obtener en una cadena todos los campos del formulario. También es posible usar serialize() para obtener todos los campos. Quizá te resulte más fácil.

  21. luna dice:

    —— validar y enviar en jq ——

    $(document).ready(function(){

    $(“#boton-enviar”).click(function(){
    var nombre =$(“#nombre”);
    var errornombre =$(“#errornombre”);

    if(!nombre.val()){
    errornombre.fadeIn(“slow”);
    nombre.focus();
    return false;
    }
    else{
    errornombre.fadeOut();
    }
    })
    })

    —— validar y enviar en js ——

    function mostrarError(elemento){
    elemento.style.display=”inherit”;
    }

    function sacarError(elemento){
    elemento.style.display=”none”;
    }

    function enviarFormulario(){
    var nombre= document.getElementById(“nombre”);
    var errornombre= document.getElementById(“errornombre”);

    if(!nombre.value || nombre.value.length20){
    mostrarError(errornombre);
    nombre.focus();
    return false;
    }
    else{
    sacarError(errornombre);
    }
    }

  22. Militza dice:

    Hola José, excelente ejemplo, podrias colocar uno de este mismo estilo pero verificando un formulario de tipo steps o wizard, donde hay que ir siguiente, siguiente, ose verificar que los campos en el paso activo esten validados antes de ir al siguiente. Gracias!

  23. Jhojan Guerrero dice:

    Ya segui todo y si valida, lo unico es que envio los datos y no pasa nda, osea no envian no recarga la pagina

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.