Validación de formularios con CSS3 y HTML5

En este artículo veremos como validar formularios en el lado del cliente utilizando CSS3 y HTML5.

Supongamos que tenemos un formulario como este:

El cual ya hemos visto como crear en otras ocasiones, el código que se corresponde a este formulario es el siguiente:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style>
body {font: 14px/21px "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;}
.contact_form h2, .contact_form label {font-family:Georgia, Times, "Times New Roman", serif;}
.form_hint, .required_notification {font-size: 11px;}
*:focus {outline: none;}
.contact_form{
width: 550px;
margin: 30px auto;
}
div.form_label{
width: 140px;
height: auto;
float: left;
}
div.form_field {
margin: 0 0 10px 10px;
}
.contact_form h2 {
margin:0;
display: inline;
}
.required_notification {
color:#d45252;
margin:5px 0 0 0;
display:inline;
float:right;
}
.contact_form input, .contact_form textarea {
border:1px solid #aaa;
box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
border-radius:2px;
-moz-transition: padding .25s;
-webkit-transition: padding .25s;
-o-transition: padding .25s;
transition: padding .25s;
}
.contact_form input:focus, .contact_form textarea:focus {
background: #fff;
border:1px solid #100355;
box-shadow: 0 0 3px #aaa;
padding-right:70px;
}
button.submit {
background-color: #035eb1;
background: -webkit-gradient(linear, left top, left bottom, from(#035eb1), to(#260191));
background: -webkit-linear-gradient(top, #035eb1, #260191);
background: -moz-linear-gradient(top, #035eb1, #260191);
background: -ms-linear-gradient(top, #035eb1, #260191);
background: -o-linear-gradient(top, #035eb1, #260191);
background: linear-gradient(top, #035eb1, #260191);
border: 1px solid #260191;
border-bottom: 1px solid #260191;
border-radius: 3px;
box-shadow: inset 0 1px 0 0 #00d1d5;
color: white;
font-weight: bold;
padding: 6px 20px;
text-align: center;
text-shadow: 0 -1px 0 #0a0767;
}
button.submit:hover {
opacity:.85;
cursor: pointer;
}
button.submit:active {
border: 1px solid #035eb1;
box-shadow: 0 0 10px 5px #0a0767 inset;
}
</style>
<body>
<form action="algunFichero.php" class="contact_form">
<h2>Contáctenos</h2>
<span class="required_notification">* Campos requeridos</span>
<br>
<hr>
<div class="form_field">
<div class="form_label"><label for="name">Nombre:</label></div>
<input type="text" name="name" />
</div>
<div class="form_field">
<div class="form_label"><label for="email">Correo:</label></div>
<input type="text" name="email" />
</div>
<div class="form_field">
<div class="form_label"><label for="website">Sitio Web:</label></div>
<input type="text" name="website" />
</div>
<div class="form_field">
<div class="form_label"><label for="message">Mensaje:</label></div>
<textarea name="message" cols="30" rows="6" ></textarea>
</div>
<div class="form_field">
<button class="submit" type="submit">Enviar</button>
</div>
</form>
</body>
</html>

Ya este tiene incluido estilos para mejorar su aspecto visual.

En HTML5 para definir un campo como requerido se le define el atributo required, de esta forma se le está diciendo al navegador que su valor es requerido antes de que el formulario pueda ser enviado. Entonces, un formulario no podrá ser enviado si un campo marcado con required no ha sido llenado.

Entonces, agreguemos el atributo required a todos los elementos de nuestro formulario (porque queremos que todos sean completados).

<input type="text" name="name" required/>
     <input type="text" name="email" required/>
     <input type="text" name="website" required/>
     <textarea  name="message" cols="30" rows="6" required></textarea>

Si se dan cuenta visualmente no ocurre nada cuando se agrega el atributo required,ahora estilizaremos los campos requeridos con CSS, para esto le pondremos un asterisco rojo a los campos requeridos en el lado derecho, para lograrlo se le agrega algo de relleno con la propiedad padding y se le agrega el indicador visual que se quiere para estos casos, en este caso voy a utilizar una imagen de 16x16 pixeles, la cual pueden crear ustedes mismos.

.contact_form input, .contact_form textarea {
         padding:30px

input:required, textarea:required {

    background: #fff url(red_asterisk.png) no-repeat 98% center;

Enviando formularios que use elementos HTML5 diferentes buscadores harán diferentes cosas. Cuando el formulario sea enviado, la mayoría prevendrá de que el formulario sea enviado y mostrara una "pista" al usuario, marcando el primer campo que sea requerido y que no tenga contenido. La validación de HTML5 trabaja de acuerdo con el tipo de atributo type que es definido en los campos del formulario. Por años HTML solo ha soportado unos pocos tipos de atributos, como type="text" pero con HTML5 hay más de una docena de nuevos tipos de entrada incluyendo email y url los cuales serán usados en nuestro formulario.

Combinando los atributos type y required, el buscador ahora puede validar los formularios en el lado del cliente. Si el buscador de un usuario no soporta los nuevos tipos de campos, como el de type="email", simplemente cambiara por defecto a type="text".

Ahora cambiaremos los atributos type de nuestros campos del formulario a los equivalentes en HTML5, y con el atributo placeholder le daremos al usuario una pista de que formato debe cumplir el valor del campo.

<input type="text" name="name" placeholder="Carlos Fonseca" required/>
     <input type="email" name="email" placeholder="cfonseca@gmail.com" required/>
     <input type="url" name="website" placeholder="http://www.cfonseca.com" required/>

Como fue descrito antes en el primer campo, hemos agregado los atributos type="text" y required. Esto le informa al buscador que este campo es mandatario y que debe ser validado simplemente como texto. De esta manera, mientras que el usuario ponga al menos un carácter en el campo, será validado.

Ahora estilizaremos los campos que el buscador considera validos o inválidos. Anteriormente usamos :required en CSS para estilizar los elementos que usan el atributo required. Ahora podemos estilizar los campos validos o inválidos usando :valid o :invalid.

Primero, estilizamos los campos para que sean inválidos. Para este ejemplo solo queremos que los estilos inválidos se muestren cuando el campo sea enfocado. Usaremos un borde rojo, sombra roja, y un icono a conveniencia para indicar que el campo es inválido.

.contact_form input:focus:invalid, .contact_form textarea:focus:invalid { 
     background: #fff url(invalid.png) no-repeat 98% center;
     box-shadow: 0 0 5px #d45252;
     border-color: #b03535

  }

Ahora otra regla para estilizar los campos validos usando color verde además de un icono con colores acordes.

.contact_form input:required:valid, .contact_form textarea:required:valid {
     background: #fff url(valid.png) no-repeat 98% center;
     box-shadow: 0 0 5px #5cd053;
     border-color: #28921f;

  }

Atributo pattern de HTML5

Usando el atributo type="email" como un ejemplo, la mayoría de buscadores validan ese campo como *@*, (cualquier carácter + el símbolo de arroba (@) + cualquier carácter). Esto obviamente no limita lo suficiente pero previene que un usuario ingrese espacios o valores que sean completamente incorrectos.

El atributo de patrón (pattern) acepta expresiones regulares de javascript (regular expressions). Esta expresión es usada en vez de la de defecto del buscador para validar el campo. Entonces utilizándola en nuestro ejemplo en el campo Sitio Web quedaría de la siguiente forma:

<input type="url" name="website" placeholder="http://www.cfonseca.com" pattern="(http|https)://.+" required/>

En la siguiente imagen se muestra como en el campo se introduce un valor invalido y el navegador lo detecta según los atributos que hemos estado definiendo y muestra un mensaje para que se llene el campo correctamente.

Espero les haya servido de ayuda.

viernes, 15 de julio de 2016

Validación de formularios con CSS3 y HTML5

No hay comentarios:

Publicar un comentario

Entradas Populares

Enlaces