El formulario va estar conformado por 9 campos: nombre, dirección un numero mayor que 18, un numero mayor que el anterior, un numero de teléfono, la hora, un nombre de usuario, la contraseña y una confirmación de la contraseña. Todos los campos serán obligatorios.
- Nombre completo: tendrá como único requisito que tenga una longitud mínima de 10 caracteres
- Dirección de correo: tendrá que cumplir con el formato correcto de direcciones de correo electrónico
- El numero mayor que 18 deberá ser obviamente mayor que 18
- El numero mayor que el anterior deberá ser mayor que el anterior
- El numero de teléfono tendrá que cumplir con el formato estándar de (código de área +numero de teléfono para ello si no se ingresa como es o si se copia y pega el numero debe darle la forma correcta, así como si se ingresan letras o caracteres basura
- La hora tendrá el formato de 24 horas pero no se podrá ingresar horas superiores a las 24 ni minutos superior a 60
- El nombre de usuario debe tener como mínimo 5 caracteres y deberá comprobar que dicho nombre este disponible, es decir que no este almacenado en la base de datos
- La contraseña deberá tener como mínimo 8 caracteres
- La confirmación de la contraseña debe ser igual a la contraseña ingresada
Todos los datos deben estar correctos o de lo contrario el botón Enviar no debe funcionar.
Primero descargamos los archivos. Para descargar JQuery en distribuciones GNU/Linux como Debian escribimos en terminal:
sudo apt-get install libjs-jquery
Encontraras los archivos en /usr/share/javascript/. Los menos afortunados lo pueden descargar de acá: JQuery
Para la validación utilizaremos el plugin JQuery Validation que podemos descargar de acá: JQuery Validate
Tambien aplicaremos mascaras sobre los campos y para ello usaremos el plugin meioMask que podemos descargar así:
sudo apt-get install libjs-jquery-meiomask
O lo pueden descargar desde esta pagina: JQuery Meio Mask
Segundo, crearemos un formulario sencillo como el siguiente y lo guardamos en la ubicación que queramos. De preferencia crear una carpeta y tener todos los archivos que necesitamos:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de Validation</title>
</head>
<body>
<form id="prueba" name="prueba">
<fieldset>
<legend>Formulario de Prueba</legend>
</fieldset>
</form>
</body>
</html>Añadimos los archivos necesarios a nuestra pagina:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.meiomask.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript" src="messages_es.js"></script>
<script>
$(document).ready(function(){
$("#prueba").validate();
});
</script>
<script>
jQuery(function($) {
$('input[type="text"]').setMask();
});
//Para añadir mi propia mascara
//$.mask.masks.nombre = {mask: '9999-9999'}
</script>
Ahora comenzaremos a añadir los campos. Asegúrate de añadir un <br> después de cada campo para que estén en lineas diferentes:
El Nombre:
Validaremos que el nombre sea obligatorio y que tenga como mínimo 10 caracteres, añadimos lo siguiente al formulario
<label for="nombre">Nombre Completo:</label>
<input type="text" name="nombre" id="nombre" placeholder="Escribe mas de 10 letras" class="required" minlength="10">
Explicación: Añadimos class="required" para indicar que el campo es obligatorio y mediante minlength="10" indicamos que el campo debe tener al menos 10 caracteres
La Dirección de Correo:
El correo deber ser obligatorio y cumplir con el formato correcto. Para añadimos los siguiente
<label for="email">Direccion de correo:</label>
<input type="text" name="email" id="email" placeholder="Ej: usuario@servidor.com" class="required email">
Explicación: En este caso usamos class="required email" para indicar que el campo es requerido y además debe tener el formato de dirección de correo electrónico.
El Numero Mayor o igual que 18:
Este numero debe ser mayor que 18 y el campo es obligatorio. Lo hacemos así:
<input type="text" name="num_min" id="num_min" placeholder="Escribe un numero mayor que 18" class="required number" min="18">
Explicación: Primero indicamos mediante class="required number" que el campo es obligatorio y que es un dato numérico. Luego indicamos que debe tener como valor mínimo 18
Explicación: Primero indicamos mediante class="required number" que el campo es obligatorio y que es un dato numérico. Luego indicamos que debe tener como valor mínimo 18
El Numero Mayor o igual que el anterior:
Este numero debe ser mayor que el anterior y obligatorio. Lo hacemos así:
<input type="text" name="num_max" id="num_max" placeholder="Escribe un numero mayor que el anterior" class="required number" onfocus="document.prueba.num_max.min=document.prueba.num_min.value">
Explicación: para este campo indicamos su formato igual que el anterior y además añadimos un evento onfocus el cual asigno el valor mínimo del campo haciendo que el atributo min sea igual al valor del campo anterior
Numero de teléfono más código de país:
La idea es que este campo solo tome valores numéricos y automáticamente al formato de los números de teléfono. Lo insertamos de la siguiente manera:
<label for="tel">Ingresa tu numero de telefono mas el codigo de pais:</label>
<input type="text" name="tel" id="tel" placeholder="Ej. (503) 2393-0000" alt="phone-us">
Explicación: para este campo indicamos su formato igual que el anterior y además añadimos un evento onfocus el cual asigno el valor mínimo del campo haciendo que el atributo min sea igual al valor del campo anterior
Numero de teléfono más código de país:
La idea es que este campo solo tome valores numéricos y automáticamente al formato de los números de teléfono. Lo insertamos de la siguiente manera:
<label for="tel">Ingresa tu numero de telefono mas el codigo de pais:</label>
<input type="text" name="tel" id="tel" placeholder="Ej. (503) 2393-0000" alt="phone-us">
Explicación: En este campo utilizamos una mascara, la cual asignamos mediante el atributo alt="phone-us" donde phone-us corresponde al nombre de la máscara utilizada. En este caso estamos usando una de las preestablecidas del plugin, pero podemos crear nuestras propias mascaras, como se indica en el código javascript que se indica más arriba en este mismo post.
Hora:
La hora solamente debe aceptar valores numéricos y horas válidas. Lo insertamos así:
<label for="time">Que hora es:</label>
<input type="text" name="hora" id="hora" placeholder="Formato de 24 horas" alt="time">
Nombre de Usuario:
Para este campo primero crearemos una base de datos sencilla con la cual comprobar el nombre. Crea una base de datos llamada "validacion" (sin las comillas), y una tabla llamada "usuario", con un campo llamado "usuario", inserta los registros que quieras.
Luego añade el campo de la siguiente manera:
<label for="user">Nombre de Usuario:</label>
<input for="text" name="user" id="user" placeholder="Escribe tu nombre de Usuario" remote="validar_usuario.php">
Donde la magia radica en el atributo remote, el cual hace referencia a un archivo "validar_usuario.php", dentro de ese archivo se realiza la consulta y dependiendo del resultado se comprueba la disponibilidad del nombre. He aquí un ejemplo de lo que puede contener "validar_usuario.php" usando MySQL y PHP:
<?
mysql_connect('localhost','root','root');
mysql_select_db('validacion');
$query="SELECT * FROM usuario WHERE usuario = '".$_GET['user']."' ";
$rs=mysql_query($query);
if(mysql_num_rows($rs)>0){
echo "false";
}
else{
echo "true";
}
?>
Se utiliza echo "true" para indicar que el nombre está disponible y echo "false" para indicar que el mismo ya está siendo utilizado
Al probar este campo verás que el mensaje que se muestra no es el adecuado para el tipo de validación, pero puedes editar el archivo "messages_es.js" y editar el mensaje asignado a remote, para obtener uno con más significado.
Password
El Password requiere de 8 caracteres como mínimo y es un campo obligatorio. Aplicamos la misma validación del nombre:
<label for="key">Password:</label>
<input type="password" name="key" id="key" class="required" minlength="8">
Donde usamos class="required" para indicar que es obligatorio y minlength="8" para indicar que debe tener al menos 8 caracteres.
Confirmación del Password
La confirmación del password solamente requiere que sea obligatorio y que sea igual que el campo anterior.
<label for="key_equal">Repita su password:</label>
<input type="password" name="key_equal" id="key_equal" class="required" equalto="#key">
En este último campo usamos el atributo equalto="#key" para indicar con que valor debe ser comparado. #key corresponde al id del campo con el que se debe comparar.
Por último añadimos un botón de tipo Submit
<input type="submit">
Ahora solo resta probar la validación del formulario.
EXTRA:
Por defecto el aspecto de la validación será un tanto fea. Eso lo podemos arreglar mediante css. He aquí un ejemplo, lo añadimos a nuestro formulario:
<style>
label.error{color: red;float:right;}
input.error{border-color: red;}
</style>
De esta manera jugando con la clase .error podemos personalizar la forma en que se presentan los errores.
Otra cosa, es que debido a la codificación de caracteres cuando se trate de tildes y eñes aparecerán símbolos raros en los mensajes. Esto es algo que no he podido resolver y en cuanto encuentre una solución la posteo.
Les dejo también los enlaces a las páginas de referencia donde podrán encontrar la documentación completa y más tipo de validación de los plugins utilizados:
Meio Mask
Validation
Espero que esto sea de utilidad.
Muy bueno. Me sirvió bastante. Solo una cosa. Cómo debo construir el archivo messages_es.js?
ResponderEliminar