Validación de Formularios en HTML5

Saludos, la siguiente entrada pretende servir de introducción a la validación de formularios usando la API nativa de HTML5, sin usar Javascript.
El primer ejemplo que voy a mostrar es cuando deseamos validar que un campo dentro de un formulario tenga datos que el usuario haya ingresado previamente.

Para lograr lo mostrado en la imagen anterior podemos usar el atributo required dentro de la etiqueta input, por ejemplo:

<form action='' method='POST' id='datos' name='datos'>
<div id='input_dato'><label for='dato'>Dato Requerido:</label>
<input type='text' name='dato' id='dato' required>
<input type='submit' name='boton' id='boton'></form>

Como segundo ejemplo mostraré la forma de sugerir al usuario una serie de valores predefinidos usando la etiqueta datalist:

Con la etiqueta datalist podemos crear un efecto parecido a un Combo Box, pero con la diferencia que el usuario podrá incluir un dato que no esté presente en la lista sugerida, para lograr lo mostrado anteriormente se pueden usar las siguientes líneas de código:

<form action='' method='POST' id='datos' name='datos'>
<div id='input_dato'>
<label for='dato'>Dato Requerido:</label>
<input type='text' name='dato' id='dato' list='nombres' required>
<input type='submit' name='boton' id='boton'>
<datalist id='nombres'>

<option value='LIGHT' />
<option value='VEGETA' />
<option value='IKKI' />
<option value='EDEN' />

</datalist>
</div>
</form>


Por último voy a mostrar como lograr que el usuario solamente ingrese alguno de los valores sugeridos y que no se permita el envío de datos si el campo no posee alguno de los valores requeridos:

En la imagen anterior se muestra como la página verifica si el campo que se ha ingresado es nulo o vacío e indicándole al usuario que acción debe tomar. El mensaje que se muestra en el formulario es personalizado.

En la imagen anterior se muestra que sucede si se intenta agregar un dato no existente en la lista sugerida en el datalist, esto se logra con las siguientes líneas de código:

<form action='' method='POST' id='datos' name='datos'>
<div id='input_dato'>
<label for='dato'>Dato Requerido:</label>
<input type='text' name='dato' id='dato' list='nombres' required oninput='verificar(this)'>
<input type='submit' name='boton' id='boton'>
<datalist id='nombres'>

<option value='LIGHT' class='nombre'/>
<option value='VEGETA' class='nombre'/>
<option value='IKKI' class='nombre'/>
<option value='EDEN' class='nombre'/>

</datalist>
</div>
</form>
<script>
    //Esta función se encargará de realizar la validación de los datos
    function verificar(input){
//Primero guardamos en una variable temporal el valor del input que se desea validar
     var valor=input.value;
//Luego se verifica si el usuario intenta enviar el campo vacío
     if(valor.length==0){
//Si el campo está vacío modificamos el mensaje que deseamos que muestre el navegador
//Este paso es opcional
     input.setCustomValidity('Debe ingresar un nombre');
     }else{
//Si el campo no está vacío, procedemos a validar la información
//Guardamos el valor de todos los datos presentes en el datalist en un arreglo temporal
var cis=document.querySelectorAll('#input_datos .nombre');
//Leemos cuantos elementos incluye el arreglo cis
     var n=cis.length;
//Esta es una variable temporal que se usará en el análisis del arreglo cis
     var valorT;
//Es una variable bandera que indicará si el datos suministrado está en la lista
     var bandera=0;
//Recorremos cis
     for(var i=0;i<n;i++){
//Guardamos el iésimo valor de cis en la variable temporal valorT
     valorT=cis[i].value;
     //Comparamos el valor suministrado con valorT
     if(valor==valorT){
//Si son iguales el valor de la bandera cambia a uno
     bandera=1;
//Interrumpimos el ciclo
break;
     }     

     }
//Si la bandera es igual a uno el dato es válido y se podrá usar para cualquier función específica
     if(bandera==1){
//Con esta línea eliminamos la validación de este input
     input.setCustomValidity('');
     }else{
//Si no se encontró el valor podemos "lanzar" un mensaje indicando el error
     input.setCustomValidity(valor+' no existe en la lista sugerida');
     }     

     }
    
    }
    </script>

Para lograr esta validación debemos crear un script en HTML5 que compare el valor suministrado por el usuario con los valores sugeridos.

(Estos ejemplos se probaron en Google Chrome Versión 24.0.1312.56 para GNU/Linux)

Cualquier duda o comentario son bienvenidos por este medio, atentamente:

Manuel Pérez P.