Seguimos con las virtudes de HTML5, y el como en principio este nuevo standar nos facilitará la vida a los programadores web. Porque una de las evoluciones más potentes que incorpora es la validación de formularios de forma nativa, sin necesidad de Javascript (da la impresión de que a largo plazo la idea es cargarse este lenguaje cliente).
Como ya sabéis, tenéis varios tipos de input, que paso a listar debajo:
- search: Para cajas de búsqueda
- number: Para añadir o restar números mediante botones.
- range: Para seleccionar valores dentor de un rango.
- color: Para seleccionar un color.
- tel: Para números de teléfono.
- url: Para direcciones web.
- email: Para direcciones de correo electrónico.
- month: Para meses.
- date: Para fechas.
- week: Para semanas.
- time: Para horas.
- datetime: Para una fecha exacta, absoluta y con hora
- datetime-local: Para fechas locales y frecuencia
Al definir el tipo de campo la validación de formato ya se realiza de forma nativa sin necesidad de tener que recurrir a una expresión regular. Pero si queréis una validación más compleja (por ejemplo, que el teléfono sólo pueda empezar por 6, 9 u 8, que son las tres posibilidades en España) podéis recurrir al atributo pattern, que nos permite insertar un patrón, con el estilo de una expresión regular, para validar el contenido. Y eso no es todo, si queréis que el campo sea obligatorio basta con añadir el atributo required, y ya de forma nativa se comprueba que haya datos. Con el atributo title podéis introducir el texto que queréis que se muestre en el tool tip que saldrá para informaros del error. Podéis ver varios ejemplos:
<input type="email" title="Use el siguiente formato: direccion@mail.com" required/><!--Esto validaría un correo electrónico de forma nativa-->
<input class="hiddenSpellError" type="text" />type="text" pattern="^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$" name="email" required/> <!-- Esto validaría un correo electrónico con una expresión regular -->
<input class="hiddenSpellError" type="text" />type="date" /> <!--Esto nos sacaría un "datepicker" para seleccionar una fecha (varía según navegador)-->
Ya lo veis, la validación es fácil. Pero además, resaltar los campos erróneos se facilita también con CSS3, ya que aparece una nueva pseudo-clase: invalid. Esto nos ahorra tener que andar jugando con javascript para marcarlos. Con la pseudoclase, basta con una sencilla regla CSS para conseguirlo, sin tener que capturar ningún evento:
input:invalid{
border: 1px solid red;
color: red;
}
Sólo con ese código los campos inválidos ya se pondrán automáticamente en rojo, quedando resaltados.
De momento no todos los navegadores dan soporte a la validación nativa en HTML5, pero es evidente el potencial de esta característica, que proveerá de gran productividad y comodidad al programador.
DonnierocK 