Siempre es importante facilitar al usuario el uso e interacción con nuestra aplicación, especialmente al diligenciar formularios, en este articulo quiero compartir un pequeño script que nos permite modificar el envió de comentarios en wordpress, permitiendo que al enviar un comentario no se recargue toda la pagina sino en vez de esto, gestionemos el envió mediante una petición ajax que nos permita mostrar un mensaje de confirmación de envió sin que se recargue la página, independientemente de la tecnología, lenguaje o CMS que trabajemos el siguiente script se puede implementar para diferentes formularios, claro esta modificando los ids y clases que tengamos en nuestro formulario, igualmente quiero mostrarles como podemos implementar fácilmente la librería jquery validation para gestionar validaciones de los campos de nuestro formulario.
Antes de comenzar es necesario tener en cuenta que trabajaremos sobre el formulario de comentarios por defecto de wordpress, debemos asegurarnos que también tenemos implementado jquery, y la librería jquery validation, no siendo mas iniciemos.
- Integrar libreria jquery y jquery validation: Para integrar cualquier javascript, es buena practica hacerlo desde el archivo function.php, así que primero descargamos jquery y jquery validation y las guardamos en nuestra carpeta “js” que se encuentra dentro de la carpeta de la plantilla que estés trabajando, luego buscamos el archivo function.php y en este archivo incluiremos las siguientes lineas.
wp_enqueue_script('jquery', get_template_directory_uri() . '/js/jquery..min.js', array('jquery'));
wp_enqueue_script('validation-jquery', get_template_directory_uri() . '/js/jquery.validate.min.js', array('jquery'), '1.17.0', true);
- Luego que ya tenemos jquery y jquery validation instaladas, buscamos el archivo comments.php y adicionamos el siguiente script al final de este archivo.
(function($){
var formComments = $("#commentform").validate({
rules:{
author: {
required: true,
minlength: 3,
maxlength: 40
},
email: {
required: true,
email: true,
minlength: 6,
maxlength: 50
},
comment: {
required: true
}
},
messages: {
author: {
required: "*Error, campo obligatorio",
minlength: "Ingrese por lo menos 3 caracteres",
maxlength: "Maximo se permiten 40 caracteres"
},
email: {
required: "*Error, campo obligatorio",
minlength: "Ingrese por lo menos 6 caracteres",
maxlength: "Maximo se permiten 40 caracteres",
email: "Por favor ingrese un email Válido",
},
comment: {
required: "*Error, campo obligatorio"
}
}
});
$('document').ready(function($){
// Get the comment form
var commentform=$('#commentform');
// Add a Comment Status message
commentform.prepend('
<div id="comment-status" ></div>
');
// Defining the Status message element
var statusdiv=$('#comment-status');
commentform.submit(function(){
// Serialize and store form data
var formdata=commentform.serialize();
//Add a status message
statusdiv.html('Processing...');
//Extract action URL from commentform
var formurl=commentform.attr('action');
//Post Form with data
$.ajax({
type: 'post',
url: formurl,
data: formdata,
error: function(XMLHttpRequest, textStatus, errorThrown){
statusdiv.html('You might have left one of the fields blank, or be posting too quickly');
},
success: function(data, textStatus){
if(data=="success")
statusdiv.html('Thanks for your comment. We appreciate your response');
commentform.find('textarea[name=comment]').val('');
}
});
return false;
});
});
});
