Agregar validación de formulario a comentarios de WordPress usando jQuery

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

Cuando se trata de una experiencia de usuario más simple, tener la validación de su formulario instantáneamente en la misma página es mucho más limpio que volver a cargar páginas y posiblemente perder contenido de alguna forma. En este tutorial, le mostraré cómo usar jQuery para hacer una comprobación instantánea en un formulario de comentario de ejemplo.

Nuestro ejemplo

Para nuestro ejemplo, vamos a agregar la validación de formulario a un formulario de comentario en el tema predeterminado de WordPress. Sin embargo, el proceso es muy similar para cualquier tipo de validación de formulario, por lo que puede aplicar fácilmente esta técnica a un ejemplo que no sea de WordPress.
El tema al que agregaremos la validación es el tema predeterminado de WordPress que viene empaquetado con cada instalación. Entonces, si desea seguir completamente, diríjase a Wordpress.org y descargue e instale una copia en su servidor.

Si no está familiarizado con el formulario de comentarios de WordPress, también puede visitar el tutorial de Tuts+ - Cómo descifrar los secretos de Comments.php de WordPress

Paso 1: descargue el complemento de validación jQuery & Bassistance.de

Puede descargar jQuery en el sitio web jQuery.com En la primera página verá directamente "Descargar jQuery y algunas descargas diferentes. No vamos a perder el jQuery framework, así que puede descargar la versión" Minified and Gzipped " , esto significa que está comprimido.

A continuación, necesitamos el complemento de validación jQuery, creado por bassistance.de. Este complemento le permite validar formularios web, puede descargarlo aquí. Este archivo contiene algunos archivos Javascript, pero solo necesitamos "jquery.validate.min.js" (también comprimido) para este tutorial.

Paso 2: carga de archivos

Ahora debería tener 2 archivos, "jquery.validate.min.js" y "jquery-1.2.6.min.js", vamos a subir esto a nuestro directorio de plantillas de WordPress.

Debido a que en este tutorial estamos utilizando el tema predeterminado de WordPress, literalmente llamado "predeterminado", la carpeta que necesitamos se encuentra en /wp-content/themes/default/.

Para mantener las cosas organizadas crearemos un nuevo directorio llamado "js", esta será la carpeta con todos los javascript. Cuando haya creado el directorio, cargue los archivos en la carpeta que acabamos de crear. (/wp-content/themes/default/js).

Paso 3 - Cargando Javascript

Ahora que tenemos el javascript cargado en nuestro directorio, todavía tenemos que cargarlo en nuestro tema. El javascript debe cargarse entre las etiquetas <head> </head>. Las etiquetas de cabecera se encuentran en un archivo php, que se encuentra en el directorio de temas.

Así que busque "header.php", este es el archivo donde se encuentra la parte superior del código del tema. Ahora tenemos que asegurarnos de agregar el javascript antes de estas 2 líneas:

1	<?php wp_head(); ?>
2	</head>

Así es como incluimos un archivo javascript:

1	<script src="url/to/javascript" type="text/javascript"></script>

Por supuesto, cuando está creando un tema de WordPress para un cliente, quiere asegurarse de que sea fácil de instalar. No querrá decir: "¡Aún debe cambiar la URL a javascript!"
Queremos que las cosas sucedan automáticamente, por lo que es mejor si usamos etiquetas de WordPress. Para mostrar la URL al directorio de la plantilla, puede usar este código:

1	<?php bloginfo('stylesheet_directory'); ?>

Entonces, en combinación con el código para incluir el javascript, el resultado final es:

<script src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery-1.2.6.min.js" type="text/javascript"></script>

<script src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.validate.min.js"" type="text/javascript"></script>

¡Ahora estos 2 archivos de JavaScript se cargarán en cada página y se pueden usar en todas las páginas de WordPress que usan este tema!

Paso 4 - Activando la validación

Bien, ahora es el momento de activar la validación del formulario de comentarios, así que vuelve al directorio de temas y busca /wp-content/themes/default/comments.php

¡Ahora, solo tenemos que echar un vistazo a la parte de formulario del código! La forma comienza en la línea 73, y se ve así:

<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">

<?php if ( $user_ID ) : ?>

<p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="Log out of this account">Log out »</a></p>

<?php else : ?>

<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" />
<label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label></p>

<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" />
<label for="email"><small>Mail (will not be published) <?php if ($req) echo "(required)"; ?></small></label></p>

<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" />
<label for="url"><small>Website</small></label></p>

<?php endif; ?>

<!--<p><small><strong>XHTML:</strong> You can use these tags: <code><?php echo allowed_tags(); ?></code></small></p>-->

<p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p>
<p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />

<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
</p>
<?php do_action('comment_form', $post->ID); ?>

</form>

Ahora como puede ver, el formulario tiene un elemento ID, se llama "commentform", necesitamos este nombre para activar el javascript.
No cierre este archivo todavía, primero vuelva a "header.php" y agregue estas líneas debajo de jquery.validate.min.js

<script type="text/javascript">
$().ready(function() {
// validate the comment form when it is submitted
$("#commentform").validate();
});
</script>

Como puede ver, el ID del formulario está allí, "#commentform" esto activa la validación de cualquier formulario con la forma de comentario id.
Así que ten cuidado de no usar identificadores duplicados o de lo contrario algunos formularios serán validados, cuando tal vez no es necesario.

Ahora, cuando envía un comentario actualmente y deja todos los campos en blanco, no hace nada, aún muestra el error predeterminado de WordPress. En el próximo paso, le mostraré cómo iniciar la validación de cada campo.

Paso 5 - Validación del campo de nombre

Ahora es el momento de comenzar la validación para cada campo. Esto significa pasarle al archivo javascript de validación qué tipo de validación se requiere. La validación javascript es tan fácil de usar que solo necesita ingresar algunas palabras especiales para comenzar la validación. Comencemos con el primer campo, ese es el campo de nombre requerido, el campo se ve así:

<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" />

<label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label></p>

Queremos asegurarnos de que el comentarista haya completado el campo, y si es posible, asegúrese de ingresar al menos 4 caracteres. ¡SÍ! ¿pero cómo? Bueno, esto es extremadamente simple, puedes definir la validación llamando a una clase. Así que simplemente agrega class="required".

<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" class="required" />

<label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label></p>

¡Y WTF funciona! Si presiona enviar sin escribir su nombre, obtiene "Este campo es obligatorio". ¡¡Bonito!! Entonces, ¿qué ocurre si el usuario no ingresa un número mínimo de caracteres?
Bueno, podemos simplemente agregar esa validación agregando minlength="4" a las opciones de campo:

<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" class="required" minlength="4" />

<label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label></p>

Y ahora, cuando ingrese algo (menos de 4 caracteres), verá aparecer un nuevo mensaje "Ingrese al menos 4 caracteres". ¡Así que eso funciona perfectamente! Minlength le permite establecer la cantidad mínima de caracteres, simplemente reemplace el número a lo que cree que es necesario.

Paso 6 - Validación del campo de correo

A continuación validaremos el campo de correo electrónico, así es como se ve el campo:

<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" />

<label for="email"><small>Mail (will not be published) <?php if ($req) echo "(required)"; ?></small></label></p>

Sé lo que estás pensando, hacemos lo mismo que en el paso anterior. Bueno, eso sería incorrecto, porque aparte del campo simplemente se requiere, también tiene que ser una dirección de correo electrónico válida. Ahora sabemos cómo configurarlo con solo agregar class = "required", pero ¿cómo validar el correo electrónico? Bueno, es tan fácil como configurarlo para que sea obligatorio, excepto que ahora solo agregamos el correo electrónico.

¿Eh qué? Simplemente agregue "correo electrónico", por lo que se convierte en class="required email", esto lo hace necesario y comprueba si hay un correo electrónico válido:

<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" class="required email" />

<label for="email"><small>Mail (will not be published) <?php if ($req) echo "(required)"; ?></small></label></p>

Si prueba el campo de correo electrónico, verá que dice "Este campo es obligatorio". cuando se envía, ¡eso está bien! Y ahora, cuando ingrese algo que no sea este formato: xx@xx.xx, dirá "Ingrese una dirección de correo electrónico válida". ¡así que funciona perfecto! ¡Mira lo fácil que es!

Paso 7 - Validación del sitio web

¿Vamos a validar el campo del sitio web? No se requiere ¿no? ¡Sí, tiene usted razón! ¡Pero sí queremos una URL válida! Así que vamos a validar una URL, es tan fácil como las validaciones anteriores, pero primero echemos un vistazo al campo URL:

1	<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" />
2	<label for="url"><small>Website</small></label></p>

Ahora podría configurarlo y establecer una cantidad mínima de caracteres, pero no creo que sea necesario para este campo.
Solo quiero una URL válida, ¿cómo? Solo agregamos otra clase, pero esta vez lo llamamos class="url", así que agreguemos eso:

1	<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" class="url" />
2	<label for="url"><small>Website</small></label></p>

¿Y qué sabes tú? Ingresé "blabla" en el campo del sitio web y devuelve directamente "Ingrese una URL válida.", Y cuando lo dejo vacío, no dice que es obligatorio cuando lo envío.
¡Así que funciona perfecto, justo como yo quería! Como puede ver, es muy fácil gracias a jQuery y al complemento de validación.

Paso 8 - Validación del campo de comentario

Ese es el último campo para validar, ahora no me gustan los mensajes cortos de spam como "haga clic en mí" y ese tipo de comentarios, pero también odio los mensajes largos, que tardan horas en leerse, o simplemente están llenos de spam. Entonces me gustaría una cantidad mínima y máxima de caracteres. Pero primero veamos el campo de comentarios:

1	<p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p>

Bien, conoces el paso 1, agrega la clase requerida (class="required") para asegurarte de que algo esté escrito en el área de texto. Ahora el mínimo, ¿recuerdas, verdad? (minlength="") Ahora creo que se deben haber escrito al menos 10 palabras. Entonces eso sería minlength = "10", sigue siendo tan fácil como eso. Pero ahora queremos establecer un máximo, pero ¿cómo? Bueno, el plugin tiene una solución para eso, en lugar de minlength solo agrega maxlength más la cantidad de palabras. Creo que 100 palabras son suficientes, así que agrega maxlength="100".

¡FÁCIL! ¡Sí, lo sé! Así que así es como se vería:

1	<p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4" class="required" minlength="10" maxlength="100" ></textarea></p>

Entonces, cuando envíe el formulario en blanco, dirá como todos los demás campos "Este campo es obligatorio", pero si ingresa menos de 10 caracteres, indica "Por favor ingrese al menos 10 caracteres". y si ingresas más de 100, dice "Por favor introduce al menos 10 caracteres". ¡Así que completamos la validación! Pero eso no es todo, ¡aún tenemos que darle estilo!

Paso 9 - Estilos de forma

No sé ustedes, pero no me gusta cómo se ve el formulario. Es sucio y los errores simplemente aparecen sin estilo. Así que vamos a diseñar todo para que se vea bien y limpio, pero primero me gustaría cambiar la posición de la etiqueta. Como puede ver ahora, primero se muestra el "campo de entrada", luego el "error" y luego la "etiqueta de campo".

Creo que debería verse como esta "Etiqueta de campo", "campo de entrada" y luego el "error", para hacer esto solo tenemos que mover la etiqueta sobre el html. Cambiemos el primer campo de:

<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" class="required" />

<label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label></p>

<p><label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label>

<input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" /></p>

Como puede ver, lo único que hicimos fue mover la arriba de la <input>. Cuando actualice su página de comentarios, verá que el texto "Nombre (requerido) se mueve delante del campo de entrada.
Entonces, repita este paso para todos los campos de entrada, al final debería verse así:

Ahora como puede ver, todos los campos tienen etiquetas, excepto el campo de comentarios, creo que debería tener una etiqueta. Haga lo mismo y coloque una etiqueta encima del campo de entrada:

1	<label for="comment"><small>Comment</small></label></p>
2	<p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p>

Eso no se ve mucho mejor, ¿verdad? ¡Bueno, eso es porque aún tenemos que darle estilo! Entonces ahora es el momento de abrir el archivo CSS del tema. El archivo CSS para este tema se puede encontrar en "/wp-content/themes/default/style.css", solo abra este archivo y desplácese hasta el final.

De acuerdo, estamos listos para comenzar a diseñar, pero queremos asegurarnos de que solo este formulario se vea afectado por este CSS. Gracias a la id del formulario, podemos asegurarnos de que esto suceda. Entonces, frente a cada una de las líneas de CSS que agreguemos, nos aseguraremos de escribir #commentform .classname, esto asegura que solo los campos <form></form> entre el se vean afectados.

Primero vamos a comenzar con la etiqueta, así que agréguela al CSS:

1	#commentform label{
2	}

Ahora podemos aplicar CSS a la etiqueta, escribiendo opciones entre { y }. Así que primero establezcamos un ancho, este es el espacio que ocupará, alrededor de 200px debería ser bueno. Todavía puede leer todas las líneas y no hay texto cortado.

1	#commentform label{
2	width: 200px;
3	}

Ahora como puedes ver, no pasa nada. Esto se debe a que aún debemos asegurarnos de que las etiquetas permanezcan. Podemos usar flotador para esto:

1	#commentform label{
2	width: 200px;
3	float:left;
4	}

¡Ahora se parece más a eso! Ahora vamos a estilizar los campos de entrada y el área de texto.
Para aplicar CSS a esos campos podemos llamarlos usando "input" y "textarea". Así que agreguemos eso más un pequeño borde:

1	#commentform input, #commentform textarea{
2	border: 1px solid #dbd8d3;
3	}

Ahora quiero que todos los campos tengan la misma longitud, así como el área de texto. Así que vamos a aplicar un ancho fijo, como este:

1	#commentform input, #commentform textarea{
2	border: 1px solid #dbd8d3;
3	width: 225px;
4	}

Paso 10 - Estilo de error

Ahora, cuando pulses enviar, verás que los mensajes de error no se ven muy bien. Y creo que necesitan estar justo debajo de los campos de entrada. Cuando el script de validación genera un error, el html se verá así:

1	<label class="error" generated="true" for="author">This field is required.</label>

Esto nos dice que los errores generados obtienen el "error" de clase, así que pruébelo y mueva el error debajo de los campos de entrada.
Recuerde que las etiquetas tienen 200px de ancho, por lo que usted sabe que tenemos margen izquierdo para esa cantidad de píxeles:

1	#commentform label.error{
2	margin-left: 200px;
3	}

Pero eso es un poco simple, así que agreguemos un color de fondo y un borde:

#commentform label.error{
margin-left: 200px;
background: #fbfcda;
border:1px solid #dbdbd3;
}

Algunas cosas aquí que hacen que se vea mal, el tamaño de la fuente, no hay relleno (espacio entre el texto y el borde gris) y el margen (espacio entre los errores y los campos). Además, se vería mucho mejor si el ancho del error es el mismo que el campo de entrada, así que intentemos lo siguiente:

#commentform label.error{
font-size: 11px;
margin-left: 200px;
background: #fbfcda;
border:1px solid #dbdbd3;
width:229px;
margin-top:4px;
}

Puedes ver que ajusté el ancho, siempre tienes que ajustar un poco las cosas para que todo quede alineado:

¡Eso ya se ve genial, pero falta algo! ¡Sé una imagen de error! Probemos un icono de famfamfam.

#commentform label.error{
font-size: 11px;
margin-left: 200px;
background: #fbfcda url('images/cancel.png') no-repeat left;
border:1px solid #dbdbd3;
width:229px;
margin-top:4px;
}

Bueno, eso no es realmente, creo! Tenemos que mover el texto a la derecha, podemos hacer esto usando padding-left:

#commentform label.error{
font-size: 11px;
margin-left: 200px;
background: #fbfcda url('images/cancel.png') no-repeat left;
border:1px solid #dbdbd3;
width:209px;
margin-top:4px;
padding-left:20px;
}

Recuerde siempre que el uso de relleno aumenta el tamaño fijo, por lo que aplicamos 20 píxeles de relleno a la izquierda, lo que significa que tenemos que restar 20 píxeles del ancho. Entonces, es por eso que cambié el ancho a 209 (229-20)

¡Y eso es! El complemento de validación de jQuery es extremadamente fácil de usar y aplicar, y puede utilizar esta técnica en cualquier forma, no solo en los formularios de comentarios de WordPress.