En este tutorial aprenderemos a validar nuestros formularios usando PHP y jQuery en ambos lados: la parte del cliente (usando javascript con jQuery) y la parte del servidor (usando PHP). Será realmente interesante ver cómo en PHP apenas necesitamos ya las expresiones regulares para validar por ejemplo un e-mail y otros tipos de campos y conocer los motivos por los que se debe hacer una doble validación.
Autor: Adrián Mato
Hola! Soy diseñador, programador web y cofundador de la startup Cokidoo, desarrollamos aplicaciones web a gran escala y comercio electrónico, aplicaciones para móviles y advertising. Puedes seguirme através de mi twitter y ver algunos de mis themes en Themeforest. También soy aficionado a la fotografía.
Introducción: ¿Qué vamos a hacer?
A día de hoy a nadie se le escapa que el Javascript está jugando un papel bastante importante en la interacción y usabilidad de los sitios web, para bien… y para mal (pero eso daría para escribir otro artículo completo).
Procesos como el registro de un nuevo usuario son cada vez más interactivos y ofrecen multitud de tips / consejos, avisos y otros tipo de alertas antes de que la página se recargue al “pinchar en enviar”. Muchas de estas comprobaciones: saber si un nombre de usuario ya existe, si la contraseña cumple los requisitos, si un e-mail es correcto, etc se comprueban mediante Javascript.
Así pues nosotros trataremos de validar un formulario con los siguientes campos a validar:
- Nombre de usuario
- Contraseña
- Sitio Web (Opcional)
Los requisitos para cada campo los analizaremos con calma en los siguientes pasos del tutorial, pero como habréis visto todos serán obligatorios salvo el sitio web, que lo consideraremos opcional. ¡Vamos a ello!
Paso 1: La estructura
Como en otras ocasiones, la estructura del documento no será excesivamente importante, ya que lo importante será conocer las formas de validación del formulario, pero vamos a tratar de hacer algo vistoso para nuestro ejemplo. Simple pero funcional:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es-ES"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Cómo validar un formulario utilizando PHP y Javascript (jQuery) | Web.Ontuts</title> <link rel="stylesheet" href="main.css" type="text/css" media="screen" /> </head> <body> <div class="wrapper"> <div class="section"> <?php if(!isset($status)): ?> <h1>Formulario de validación en Cliente + Servidor</h1> <form id="form1" action="index.php" method="post"> <label for="username">Nombre de usuario (<span id="req-username" class="requisites <?php echo $username ?>">A-z, mínimo 4 caracteres</span>):</label> <input tabindex="1" name="username" id="username" type="text" class="text <?php echo $username ?>" value="<?php echo $usernameValue ?>" /> <label for="password1">Contraseña (<span id="req-password1" class="requisites <?php echo $password1 ?>">Mínimo 5 caracteres, máximo 12 caracteres, letras y números</span>):</label> <input tabindex="2" name="password1" id="password1" type="password" class="text <?php echo $password1 ?>" value="" /> <label for="password2">Repetir Contraseña (<span id="req-password2" class="requisites <?php echo $password2 ?>">Debe ser igual a la anterior</span>):</label> <input tabindex="3" name="password2" id="password2" type="password" class="text <?php echo $password2 ?>" value="" /> <label for="email">E-mail (<span id="req-email" class="requisites <?php echo $email ?>">Un e-mail válido por favor</span>):</label> <input tabindex="4" name="email" id="email" type="text" class="text <?php echo $email ?>" value="<?php echo $emailValue ?>" /> <label for="website">Sitio Web (Opcional):</label> <input tabindex="5" name="website" id="website" type="text" class="text" value="<?php echo $websiteValue ?>" /> <div> <input tabindex="6" name="send" id="send" type="submit" class="submit" value="Enviar formulario" /> </div> </form> <?php else: ?> <h1>¡Formulario enviado con éxito!</h1> <?php endif; ?> </div> </div> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="main.js"></script> </body> </html>
Para los más despistados, podríamos comentar que hemos utilizado algunas propiedades interesantes en esta estructura HTML:
- tabindex: en los elementos input del formulario, para que reciban el foco en el orden deseado al pulsar la tecla tabulador.
- for: en los elementos label, permiten que al hacer click en cada label, el input con el id correspondiente reciba el foco.
Y poco más que añadir, vamos a echar un vistazo rápido a la hoja de estilos utilizada.
Paso 2: Añadiendo un poco de estilo con CSS
Una vez más, estamos utilizando un CSS reset al inicio de nuestra hoja de estilos para posteriormente dar un poco de estilo a nuestro formulario de ejemplo:
@CHARSET "UTF-8";
/*
Author: Adrian Mato
Author URI: http://www.yensdesign.com & http://web.ontuts.com
*/
/******* GENERAL RESET *******/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
padding:0pt;
vertical-align:baseline;
}
body{
line-height: 1em;
font-size: 12px;
background: #262626 url(img/bg.png) repeat scroll 0 0;
font-family: Myriad Pro, Arial, Helvetica, sans-serif;
margin: 0pt;
cursor: default;
}
table{
border-collapse: separate;
border-spacing: 0pt;
}
strong{
font-weight: 700;
}
caption, th, td{
font-weight:normal;
text-align:left;
}
blockquote:before, blockquote:after, q:before, q:after{
content:"";
}
blockquote, q{
quotes:"" "";
}
pre{
font-family: Arial, Helvetica, sans-serif;
}
input{
border: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
textarea{
font-family: Arial, Helvetica, sans-serif;
color: #888888;
padding: 7px 3px 0 4px;
font-size: 11px;
}
select{
font-size: 11px;
color: #888888;
background: #fff;
font-family: Arial, Helvetica, sans-serif;
border: 1px solid #CAD2CE;
}
ul{
list-style: none;
list-style-type: none;
list-style-position: outside;
}
a{
cursor: pointer;
color: #296ba5;
text-decoration: none;
outline: none !Important;
}
html,body{
height:100%;
}
.clear{
clear: both;
height: 0;
visibility: hidden;
display: block;
line-height: 0;
}
.clearfix{
overflow: hidden;
}
.fleft{
float: left;
}
.fright{
float: right;
}
.italic{
font-style: italic;
}
/******* /GENERAL RESET *******/
/******* CONTENT *******/
.wrapper{
width: 640px;
margin: 0pt auto;
padding-top: 10px;
}
h1{
color: #fff;
font-size: 26px;
line-height: 3em;
}
label{
display: block;
color: #e4e1cd;
line-height: 2em;
font-size: 14px;
}
.section{
margin-bottom: 25px;
}
input.text, input.submit{
width: 70%;
background: #171717 url(img/search.png) no-repeat scroll right 2px;
padding: 8px;
color: #8c8c8c;
border: 1px solid #393939;
margin-bottom: 15px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
font-size: 16px;
}
input.text.active{
background: #343434 url(img/search.png) no-repeat scroll right -43px;
border-color: #000;
color: #fff;
}
input.submit{
width: auto !Important;
background: #f5f5f5;
color: #000;
border-color: #c8c8c8;
padding: 5px;
margin-top: 0.5em;
}
.requisites{
padding: 0 2px 0 2px;
}
.requisites.error{
text-decoration: underline;
background: #fff8cc;
color: #171717;
}
input.error{
background: #432323;
border-color: #171717;
}
/******* /CONTENT *******/
Como habréis visto, hemos reutilizado en su mayor parte todo el CSS del tutorial anterior Mejorando las cajas de búsqueda mediante jQuery. Una vez más dejamos para el final la parte interesante 
Paso 3: Validando en el lado del cliente con Javascript (jQuery)
Como de costumbre, para la validación mediante Javascript en el lado del cliente (navegador) utilizaremos jQuery. Es importante reconocer porqué estamos haciendo una doble validación, en este caso en el lado del cliente y posteriormente del lado del servidor: Por motivos de seguridad, nunca podremos confiar en el cliente ni en los datos que nos proporciona para nuestros scripts.
La doble validación formada por cliente + servidor nos garantiza que aunque el cliente desactive el Javascript por diversas razones, el script de lado del servidor siempre se encargará de validar nuevamente todos los datos introducidos por el usuario, asegurando así la fiabilidad de los mismos.
Una vez conocido el porqué de la doble validación, vamos a comenzar con las primeras líneas de nuestro archivo de javascript main.js, encargado de gestionar toda la validación del lado del cliente.
Document ready y variables de referencia
Para los más experimentados con jQuery quizás no les resulte necesario, pero cabe destacar la utilización en la primera línea de la función $(document).ready, la cual nos garantiza que nuestro código javascript no se ejecutará hasta que todo el documento ha sido cargado en el navegador, evitando así “errores undefined” y otros más por no encontrar los elementos necesarios. Dicho esto, vamos a guardar las referencias a los distintos elementos en variables.
Inicialmente nuestro javascript sería este:
$(document).ready(function(){
//variables globales
var searchBoxes = $(".text");
var inputUsername = $("#username");
var reqUsername = $("#req-username");
var inputPassword1 = $("#password1");
var reqPassword1 = $("#req-password1");
var inputPassword2 = $("#password2");
var reqPassword2 = $("#req-password2");
var inputEmail = $("#email");
var reqEmail = $("#req-email");
)};
Como siempre, guardamos las referencias a los distintos elementos en variables, para una mayor optimización y facilidad de uso.
Es importante recordar que todo lo que expliquemos apartir de ahora irá debajo de esta declaración de variables, dentro del evento $(document).ready.
Funciones de validación
Centrándonos en la parte interesante del tutorial, vamos a crear las siguientes funciones de validación:
- validateUsername(): Nombres de la A a la z con un mínimo de 4 caracteres
- validatePassword1(): Mínimo de 5 caracteres, máximo 12 caracteres, sólo letras y números
- validatePassword2(): Debe coincidir con la contraseña anterior
- validateEmail(): El e-mail debe ser válido
Así pues, estas serían nuestras funciones definidas:
//funciones de validacion
function validateUsername(){
//NO cumple longitud minima
if(inputUsername.val().length < 4){
reqUsername.addClass("error");
inputUsername.addClass("error");
return false;
}
//SI longitud pero NO solo caracteres A-z
else if(!inputUsername.val().match(/^[a-zA-Z]+$/)){
reqUsername.addClass("error");
inputUsername.addClass("error");
return false;
}
// SI longitud, SI caracteres A-z
else{
reqUsername.removeClass("error");
inputUsername.removeClass("error");
return true;
}
}
function validatePassword1(){
//NO tiene minimo de 5 caracteres o mas de 12 caracteres
if(inputPassword1.val().length < 5 || inputPassword1.val().length > 12){
reqPassword1.addClass("error");
inputPassword1.addClass("error");
return false;
}
// SI longitud, NO VALIDO numeros y letras
else if(!inputPassword1.val().match(/^[0-9a-zA-Z]+$/)){
reqPassword1.addClass("error");
inputPassword1.addClass("error");
return false;
}
// SI rellenado, SI email valido
else{
reqPassword1.removeClass("error");
inputPassword1.removeClass("error");
return true;
}
}
function validatePassword2(){
//NO son iguales las password
if(inputPassword1.val() != inputPassword2.val()){
reqPassword2.addClass("error");
inputPassword2.addClass("error");
return false;
}
// SI son iguales
else{
reqPassword2.removeClass("error");
inputPassword2.removeClass("error");
return true;
}
}
function validateEmail(){
//NO hay nada escrito
if(inputEmail.val().length == 0){
reqEmail.addClass("error");
inputEmail.addClass("error");
return false;
}
// SI escrito, NO VALIDO email
else if(!inputEmail.val().match(/^[^\s()<>@,;:\/]+@\w[\w\.-]+\.[a-z]{2,}$/i)){
reqEmail.addClass("error");
inputEmail.addClass("error");
return false;
}
// SI rellenado, SI email valido
else{
reqEmail.removeClass("error");
inputEmail.removeClass("error");
return true;
}
}
En alguna de nuestras funciones hemos utilizado expresiones regulares para facilitar la comprobación, por ejemplo, para reconocer si un e-mail es considerado válido o no, si no estás familiarizado con ellas te recomiendo que eches una ojeada por algunos artículos y trates de reconocer el porqué de cada una de ellas.
Las expresiones regulares nos permiten realizar las comprobaciones de forma eficiente, segura y rápida de nuestros distintos tipos datos: e-mail, número de teléfono, tipos de datos propios… y todo lo que se nos pueda ocurrir, siempre y cuando seamos capaces de escribir el patrón para la expresión regular.
Como habéis podido comprobar, estamos continuamente añadiendo / quitando la clase “error” de nuestro CSS para notificar al usuario que se está equivocando en algún campo del formulario, cambiando el aspecto del campo y su label si fuese necesario.
Ahora que ya tenemos nuestras funciones de validación listas para usar, debemos pensar en qué eventos son necesarias para poder llamarlas y utilizarlas de forma adecuada.
Llamando a las funciones de validación en los eventos
Con todo el material listo para usar, sólo nos queda decidir en qué eventos pediremos a nuestro código javascript que compruebe la validación de nuestros datos en el formulario. En nuestro caso serán los siguientes:
- Validaremos el nombre en: pérdida de foco y pulsación de tecla
- Validaremos el e-mail en: pérdida de foco
- Validaremos las contraseñas en: pérdida de foco y pulsación de tecla
- Validaremos todos los campos en: envío de formulario
Este será el código con el que gestionaremos estos eventos y la validación:
//controlamos la validacion en los distintos eventos
// Perdida de foco
inputUsername.blur(validateUsername);
inputEmail.blur(validateEmail);
inputPassword1.blur(validatePassword1);
inputPassword2.blur(validatePassword2);
// Pulsacion de tecla
inputUsername.keyup(validateUsername);
inputPassword1.keyup(validatePassword1);
inputPassword2.keyup(validatePassword2);
// Envio de formulario
$("#form1").submit(function(){
if(validateUsername() & validatePassword1() & validatePassword2() & validateEmail())
return true;
else
return false;
});
Con todo esto, hemos dejado lista la parte de validación de lado del cliente… ¡vamos a por la del servidor!
Paso 4: Validando en el lado del servidor con PHP
Como ya hemos comentado anteriormente, no podemos confiar nunca en el cliente por tanto, necesitamos realizar la misma validación de datos de lado del servidor. La lógica de validación será muy similar a la empleada en el código javascript, salvando las diferencias del lenguaje.
Funciones de validación mediante PHP
Crearemos pues un archivo php llamado “index.php” en el cual definiremos las funciones de validación. Básicamente recrearemos los mismos requisitos que vimos en el lado del cliente (via javascript) pero en PHP:
function validateUsername($name){
//NO cumple longitud minima
if(strlen($name) < 4)
return false;
//SI longitud pero NO solo caracteres A-z
else if(!preg_match("/^[a-zA-Z]+$/", $name))
return false;
// SI longitud, SI caracteres A-z
else
return true;
}
function validatePassword1($password1){
//NO tiene minimo de 5 caracteres o mas de 12 caracteres
if(strlen($password1) < 5 || strlen($password1) > 12)
return false;
// SI longitud, NO VALIDO numeros y letras
else if(!preg_match("/^[0-9a-zA-Z]+$/", $password1))
return false;
// SI rellenado, SI email valido
else
return true;
}
function validatePassword2($password1, $password2){
//NO coinciden
if($password1 != $password2)
return false;
else
return true;
}
function validateEmail($email){
//NO hay nada escrito
if(strlen($email) == 0)
return false;
// SI escrito, NO VALIDO email
else if(!filter_var($_POST['email'], FILTER_SANITIZE_EMAIL))
return false;
// SI rellenado, SI email valido
else
return true;
}
Mezclando las dos partes en una sóla…
Una vez tenemos las funciones de validación, sólo nos queda mezclar la estructura HTML anterior del Paso 1, con la lógica correspondiente en el PHP para tenerlo todo funcionando correctamente. Este sería el resultado final del index.php:
<?php
function validateUsername($name){
//NO cumple longitud minima
if(strlen($name) < 4)
return false;
//SI longitud pero NO solo caracteres A-z
else if(!preg_match("/^[a-zA-Z]+$/", $name))
return false;
// SI longitud, SI caracteres A-z
else
return true;
}
function validatePassword1($password1){
//NO tiene minimo de 5 caracteres o mas de 12 caracteres
if(strlen($password1) < 5 || strlen($password1) > 12)
return false;
// SI longitud, NO VALIDO numeros y letras
else if(!preg_match("/^[0-9a-zA-Z]+$/", $password1))
return false;
// SI rellenado, SI email valido
else
return true;
}
function validatePassword2($password1, $password2){
//NO coinciden
if($password1 != $password2)
return false;
else
return true;
}
function validateEmail($email){
//NO hay nada escrito
if(strlen($email) == 0)
return false;
// SI escrito, NO VALIDO email
else if(!filter_var($_POST['email'], FILTER_SANITIZE_EMAIL))
return false;
// SI rellenado, SI email valido
else
return true;
}
//Comprobacion de datos
//variables valores por defecto
$username = "";
$usernameValue = "";
$password1 = "";
$password2 = "";
$email = "";
$emailValue = "";
$websiteValue = "";
//Validacion de datos enviados
if(isset($_POST['send'])){
if(!validateUsername($_POST['username']))
$username = "error";
if(!validatePassword1($_POST['password1']))
$password1 = "error";
if(!validatePassword2($_POST['password1'], $_POST['password2']))
$password2 = "error";
if(!validateEmail($_POST['email']))
$email = "error";
//Guardamos valores para que no tenga que reescribirlos
$usernameValue = $_POST['username'];
$emailValue = $_POST['email'];
$websiteValue = $_POST['website'];
//Comprobamos si todo ha ido bien
if($username != "error" && $password1 != "error" && $password2 != "error" && $email != "error")
$status = 1;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es-ES">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Cómo validar un formulario utilizando PHP y Javascript (jQuery) | Web.Ontuts</title>
<link rel="stylesheet" href="main.css" type="text/css" media="screen" />
</head>
<body>
<div class="wrapper">
<div class="section">
<?php if(!isset($status)): ?>
<h1>Formulario de validación en Cliente + Servidor</h1>
<form id="form1" action="index.php" method="post">
<label for="username">Nombre de usuario (<span id="req-username" class="requisites <?php echo $username ?>">A-z, mínimo 4 caracteres</span>):</label>
<input tabindex="1" name="username" id="username" type="text" class="text <?php echo $username ?>" value="<?php echo $usernameValue ?>" />
<label for="password1">Contraseña (<span id="req-password1" class="requisites <?php echo $password1 ?>">Mínimo 5 caracteres, máximo 12 caracteres, letras y números</span>):</label>
<input tabindex="2" name="password1" id="password1" type="password" class="text <?php echo $password1 ?>" value="" />
<label for="password2">Repetir Contraseña (<span id="req-password2" class="requisites <?php echo $password2 ?>">Debe ser igual a la anterior</span>):</label>
<input tabindex="3" name="password2" id="password2" type="password" class="text <?php echo $password2 ?>" value="" />
<label for="email">E-mail (<span id="req-email" class="requisites <?php echo $email ?>">Un e-mail válido por favor</span>):</label>
<input tabindex="4" name="email" id="email" type="text" class="text <?php echo $email ?>" value="<?php echo $emailValue ?>" />
<label for="website">Sitio Web (Opcional):</label>
<input tabindex="5" name="website" id="website" type="text" class="text" value="<?php echo $websiteValue ?>" />
<div>
<input tabindex="6" name="send" id="send" type="submit" class="submit" value="Enviar formulario" />
</div>
</form>
<?php else: ?>
<h1>¡Formulario enviado con éxito!</h1>
<?php endif; ?>
</div>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
¿Cómo pruebo sólo el lado del servidor?
Si queréis probar cómo funcionaría el ejemplo si alguien desactivase el javascript / no tuviese soporte javascript en su navegador, simplemente desactivarlo o bien comentar / quitar la línea en la que se incluye el archivo main.js y podréis verlo sin problemas.
¡Ya hemos terminado con nuestra doble validación de formulario!
Reflexión final
Puede llegar a parecer un tutorial tedioso, demasiado denso o grande, pero lo cierto es que no es nada complicado. Teniendo bien claro el objetivo y los pasos que hemos de afrontar para lograr la doble validación del lado del cliente y del servidor, el proceso resulta realmente sencillo.
Si algo podemos sacar en claro de este tutorial es que las expresiones regulares son muy potentes en cualquier lenguaje de programación, y que nunca hay que confiar en los datos introducidos por el usuario, es siempre recomendable comprobarlos para evitar futuros errores de diversa índole.
Quizás las expresiones y la lógica del archivo final PHP no sea la más optimizada, ni la más rápida, pero he creído conveniente hacerla así para que le resulte a todo el mundo cómodo y fácil de seguir. Como siempre digo, un tutorial debe arrojar un poco de luz a un problema, cada caso requiere una solución distinta, pero comprendiendo lo que se explica en el tutorial, podremos dar rienda a nuestra imaginación y solucionar los problemas relacionados con lo que aquí hemos explicado.
¡Os espero en el próximo tutorial!
Te sugerimos otras entradas relacionadas...
¿Necesitas desarrollar un proyecto web o para móviles? ¡Estamos disponibles!
Cokidoo, los creadores de Ontuts, desarrollamos proyectos tecnológicos centrados en redes sociales y aplicaciones web, aplicaciones móviles y consultoría web y bases de datos.
Somos jóvenes, inquietos, versátiles, apasionados por la innovación y enfocados en las nuevas tecnologías. Con Ontuts tratamos de compartir nuestro conocimiento adquirido en los distintos proyectos, ayudando a la comunidad y mostrando nuestra capacidad tecnológica.
Si necesitas un presupuesto sin compromiso, estamos disponibles, no dudes en contactar con nosotros.
Comentarios en esta publicación (34 comentarios)
¿Te ha gustado esta publicación? ¡Puedes compartir tu opinión con todos nosotros! Simplemente pincha aquí mismo.