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 de un formulario 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.) que te puede ahorrar mucho trabajo en las validaciones de tus formularios.

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

Código HTML dentro del cuerpo de la página

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

<div class="alert alert-success" id="alert" style="display: none;">&nbsp;</div>
<form id="contact-form" method="post">
    <div class="form-group">
        <label for="name">Nombre</label>
        <input type="text" class="form-control" id="name" name="name" placeholder="Introduce tu nombre">
    </div>
 
    <div class="form-group">
        <label for="email">Email</label>
        <input type="email" class="form-control" id="email" name="email" aria-describedby="emailHelp" placeholder="Introduce tu email">
    </div>
 
    <div class="form-group">
        <label for="message">Mensaje</label>
        <textarea class="form-control" id="message" name="message" rows="3"></textarea>
    </div>
 
    <div class="form-group">
        <input class="btn btn-primary submit" type="submit" value="Enviar" />
    </div>
</form>

No vamos a hacer mucho incapié en la maquetación o aspecto que estamos empleando. Tan solo vamos a informar que estamos utilizando la tecnología Bootstrap 4 para ahorrar trabajo.

Se trata de un formulario simple con tres campos: nombre, email y mensaje. Tiene un botón de tipo submit y un contenedor con id=»alert» para depositar la respuesta que retorna la llamada Ajax.

Código jQuery que incluye el plugin jQuery Validate y realiza la llamada

Dentro de la etiqueta <head> deberemos incluir la librería jQuery, el plugin jQuery Validate y su llamada:

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="js/jquery.form.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#contact-form").validate({
        event: "blur",rules: {'name': "required",'email': "required email",'message': "required"},
        messages: {'name': "Por favor indica tu nombre",'email': "Por favor, indica una direcci&oacute;n de e-mail v&aacute;lida",'message': "Por favor, dime algo!"},
        debug: true,errorElement: "label",
        submitHandler: function(form){
            $("#alert").show();
            $("#alert").html("<img src='images/ajax-loader.gif' style='vertical-align:middle;margin:0 10px 0 0' /><strong>Enviando mensaje...</strong>");
            setTimeout(function() {
                $('#alert').fadeOut('slow');
            }, 5000);
            $.ajax({
                type: "POST",
                url:"send.php",
                data: "name="+escape($('#name').val())+"&email="+escape($('#email').val())+"&message="+escape($('#message').val()),
                success: function(msg){
                    $("#alert").html(msg);
                    document.getElementById("name").value="";
                    document.getElementById("email").value="";
                    document.getElementById("message").value="";
                    setTimeout(function() {
                        $('#alert').fadeOut('slow');
                    }, 5000);
 
                }
            });
        }
    });
});
</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=»contact-form», establecemos unas normas para cada campo como por ejemplo que el campo nombre, email y mensaje sean requeridos.

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 construir 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.

Código PHP que se ejecuta en el servidor

Ahora solo faltará crear el archivo PHP que estamos utilizando en la llamada Ajax al cual le hemos dado el nombre de «send.php». Este 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.

<?php
echo 'Gracias '.$_POST['name'].' - '.$_POST['email'].'. La consulta ha sido recibida correctamente!';
//codigo para enviar el email...
?>

Esta entrada ha sido actualizada el 29/08/2018.

Ver demo Descargar

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(33 votos, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

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

  1. Alberto dice:

    Hola, haciendo alusión a JORDAN RUIZ en agosto del 2020, que se le duplican los envíos a veces, a mi me pasa igual. Alguien podría ayudarnos a JORDAN y a mi por el motivo de la duplicidad?. Muchas gracias y un saludo.

  2. ivan dice:

    Hola JOSE ,una pregunta , si quisiera ponerle mas reglas y mensajes para validar , ¿como lo haria? , busco y no encuentro.

    event: «blur»,rules: {‘name’: «required»,’email’: «required email»,’message’: «required»},
    messages: {‘name’: «Por favor indica tu nombre»,’email’: «Por favor, indica una dirección de e-mail válida»,’message’: «Por favor, dime algo!»},

    Quisiera poner que el nombre , minimo acepte 4 caracteres y maximo 20 por ejemplo. ¿Cómo lo puedo programar?

  3. JORDAN RUIZ dice:

    Hola amigo. Yo tambien utilizo el jquery validate con ajax y php y mysql, peor me he dado cuenta que hay ocasiones en que se duplica el registro. Es como si se enviara dos veces el formulario. Pero no es siempre que ocurre ese problema. Que puede ser?

  4. Nicholas dice:

    Gracias, si le entendi, solo algo no me queda claro, porque pasa como parametro FORM en la funcion de submitHandler???

  5. Andrés Burbano dice:

    Un saludo. Gracias por este material. Funciona muy bien pero tengo un problema y es que tengo algunos checkbox cuyo VALUE = 1 y envía todos los campos con ese valor aun si no los selecciono.
    ¿que puedo hacer al respecto?. Gracias.

  6. kev dice:

    como puedo realizar para que el formulario se bloque cada envio o cierto tiempo no se pueda ocupar.

  7. 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

  8. 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!

  9. 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);
    }
    }

  10. 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.

  11. 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

  12. Enrique dice:

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

  13. 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

  14. 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.

  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. 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!!!

  17. 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!!!

  18. 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

  19. Eduardo Mena dice:

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

  20. 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();
    }
    });
    }
    });
    });

  21. 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 🙁

  22. 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.

  23. 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???

  24. 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

  25. Tania Maria dice:

    Está Perfecto muchas gracias.

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

    Saludos.

  26. 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

  27. 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

  28. 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

  29. 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 […]

Deja una respuesta

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.

Ver más sobre