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.
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;"> </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ón de e-mail vá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.
Autor
¿Buscas trabajo de programador?
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.
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?
Hola,
Revisa las opciones del plugin en la página oficial. Seguramente tenga alguna opción para lo que comentas.
Saludos
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?
Gracias, si le entendi, solo algo no me queda claro, porque pasa como parametro FORM en la funcion de submitHandler???
Hola,
Pues probablemente eso sea antiguo y sobre ya que no se usa en el código.
Saludos
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.
Quizá una solución es poner un valor distinto a cada uno de ellos. ¿Has probado eso?
como puedo realizar para que el formulario se bloque cada envio o cierto tiempo no se pueda ocupar.
Hola,
Quizá una posibilidad es deshabilitar el botón de envío con el atributo disabled=»disabled». Si necesitas deshabilitarlo por un tiempo quizá te puede ayudar la función setInterval()
En el siguiente enlace tienes un ejemplo de uso:
https://www.jose-aguilar.com/blog/ejecutar-una-funcion-cada-x-segundos-con-jquery/
Saludos
Ya segui todo y si valida, lo unico es que envio los datos y no pasa nda, osea no envian no recarga la pagina
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!
—— 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);
}
}
pero, cómo obtienes los valores que envias en data (data: dataString) en el formulario php?
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.
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
Disculpa pero si no deseo usar un submit y si un button como afectaria el codigo?
Gracias de antemano y buen trabajo
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
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.
Hola buenos días,
Quizá te pueda servir el siguiente post:
http://www.jose-aguilar.com/blog/efecto-cargando-con-jquery-ajax/
Saludos
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??
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
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!!!
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!!!
Hola,
Posiblemente te pueda servir esto:
http://www.jose-aguilar.com/blog/comprobar-disponibilidad-de-nombre-de-usuario-en-vivo/
Saludos
Muchas gracias y lo pruebo en seguida.
Le agradezco su tiempo y respuesta.
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.
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
Que tal José, estoy teniendo problemas, no me estan llegando los datos a mi archivo .php.
debes sacar el div fuera del form cumpa..
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();
}
});
}
});
});
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 🙁
Fíjate bien en las versiones de jquery aunque veo que el error que aparece es que hay algo que no está definido y deberías hacerlo.
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.
Diría que las rules van con attributo name
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???
Puedes ir a la página oficial del plugin jquery.validate o descargarte los archivos del ejemplo en funcionamiento. Lo puedes hacer viendo el código fuente.
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
Está Perfecto muchas gracias.
Solo hay un detalle, se debe dejar el div fuera del form =)
Saludos.
Es cierto xD por eso no aparecia la info…..
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
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
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
Hola buenos días,
Lo siguiente podría darte una solución: http://jqueryvalidation.org/range-method
Saludos
[…] See on Scoop.it – Sergio LimaSee on http://www.jose-aguilar.com […]