0 [Diseño] HTML 5 Validación de Formularios

HTML5 no solo ofrecerá una serie de elementos para hacer la web más visual, también ayudará a los desarrolladores web a realizar tareas cotidianas de forma más rápida y segura. Una de ellas es la validación de formularios.

Atributos

Gracias a una serie de atributos que podremos usar en elementos de nuestros formularios podremos condicionar desde el diseño las validaciones de cualquier formulario de nuestra página.

required

Como su nombre indica, el formulario no se enviará mientras el elemento que contenga este atributo no esté informado. Algo que hasta ahora estábamos haciendo en nuestra capa de funcionalidad con javascript, recorriendo elementos o comprobando los elementos con una class específica.

<input name="nombre" required >;

pattern

También podremos difinir el patrón que el texto deba tener dentro de nuestros elementos <input />. Este atributo realiza dos funciones, una especificar el formato del dato que recibiremos y otra la de ayudar a comprender al usuario el formato que deba usar (por ejemplo, campo para insertar un teléfono (+34) 971 123456).

<input type="telefono" pattern="(+[0-9]{2}) [0-9]{3} [0-9]{6}" >

maxlength

Podremos especificar la longitud máxima de nuestros datos directamente desde un atributo sin necesidad de controlarla desde javascript.

<textarea name="tweet" maxlength="150"></textarea>

min, max, step

Los actuales sliders pasarán a mejor vida cuando nuestros elementos se puedan definir desde nuestros elementos indicando los valores mínimos, máximos y los pasos entre ellos directamente.

<input name="slider" min="1" max="10" step="2" >

Javascript

Esto no significa que desde Javacript no vayamos a hacer nada ya con nuestros formularios, todo lo contrario, se añaden métodos nuevos a los elementos que nos permitirán trabajar con estas validaciones de una forma más cómoda.

Aún es una propuesta, pero apunta a ser una herramienta muy útil.

element.validity

Objeto que nos muestra información referente a la validación del elemento.

• boolean valueMissing; — Devuelve true si el elemento está vacío y requerido.
• boolean typeMismatch; — Devuelve true si el elemento no contiene la sintaxis correcta.
• boolean patternMismatch; — Devuelve true si el elemento no cumple el patrón definido.
• boolean tooLong; — Devuelve true si el elemento es más grande que el tamaño definido.
• boolean rangeUnderflow; — Devuelve true si el elemento es menor al mínimo definido.
• boolean rangeOverflow; — Devuelve true si el elemento es mayor al máximo definido.
• boolean stepMismatch; — Devuelve true si el elemento no concuerda con uno de los pasos definidos.
• boolean customError; — Devuelve true si el elemento tiene un error personalizado.
• boolean valid; — Devuelve true si el elemento es válido.

element.setCustomValidity()

Método definido para especificar un mensaje de error personalizado a un elemento:

<label>Feeling: <input name=f type="text" oninput="check(this)"></label>
<script>
 function check(input) {
   if (input.value == "good" ||
       input.value == "fine" ||
       input.value == "tired") {
     input.setCustomValidity('"' + input.value + '" is not a feeling.');
   } else {
     // input is fine -- reset the error message
     input.setCustomValidity('');
   }
 }
</script>

CSS

La capa de diseño además nos permitirá informar al usuario que un elemento no ha sido validado a la hora de enviar nuestro formulario, para ello nos acercan el pseudoselector :invalid para que podamos definir el aspecto de nuestros elementos no válidos.

:invalid{
border: 1px red solid;
}

Hay muchas más y más interesantes nuevas funcionalidades que nos harán la vida más fácil, las iremos viendo más adelante.

Extraido de aNieto2K