HTML5: Validación formularios

HTML5_sticker

Usar solamente HTML para validar formularios era impensable hasta hace poco (sin usar Javascript claro), gracias a las nuevas funcionalidades de HTML5 ahora es posible (la pega es que no todos los navegadores implementan aún estas nuevas características).

Contenido:

El atributo ‘required’

La idea básica detrás de la validación con HTML5 es que nosotros indicamos donde debería producirse la validación pero sin implementar detalles tediosos, por ejemplo si determinamos que un campo del formulario no puede ir en blanco, en HTML5 podemos especificarlo mediante el atributo ‘required‘:

<form action="#" id="form">
    <fieldset>
        <label for="name">Your Name <em>*</em></label>
        <input type="text" name="name" id="name" required><br> 
    </fieldset>
    <button type="submit">Click Me!</button>
</form>

El mensaje de error indicando que no hemos introducido nada en el campo obligatorio dependerá del  navegador, en Chrome por ejemplo:

required

Ver ejemplo 01.01_required_attr.html

Asegurandonos que un valor está dentro de los límites

<form action="#" id="form">
    <fieldset>
        <label for="price">
            Price (0..100): 
            <input type="number" name="price" id="price" min="0" max="100" value="1" >
       </label>
    </fieldset>
    <button type="submit">Click Me!</button>
 </form>

El ejemplo de más abajo funcionando en Chrome (ojo que en cada navegador puede estar o no implementado):

min_max

Ver ejemplo 01.02_value_within_bounds_attr.html

Usando un patrón para validar


Código de ejemplo:

<form action="#" id="form">
    <fieldset>
        <label for="name">
            Nombre y 1º apellido separados por un espacio:
            <input type="text" name="name" id="name" pattern="^.* .*$" >
        </label>
     </fieldset>
    <button type="submit">Click Me!</button>
</form>

pattern

Ver ejemplo 01.03_value_with_pattern_attr.html

Deshabilitando la validación


Código de ejemplo igual que el anterior con la salvedad que emplea el atributo ‘novalidate’:

<form action="#" id="form" novalidate>
    <fieldset>
        <label for="name">
            Nombre y 1º apellido separados por un espacio:
            <input type="text" name="name" id="name" pattern="^.* .*$" >
        </label>
     </fieldset>
    <button type="submit">Click Me!</button>
</form>

Ver ejemplo 01.04_turn_validation_off.html

Dando estilo a controles de validación con CSS


A pesar de que no podemos definir el estilo o contenido de los mensajes de validación que proporciona el navegador, podemos cambiar la apariencia de los controles dependiendo de su estado de validación, por ejemplo asignando un color de fondo si es una entrada no valida.

Pseudoclases que podemos usar con este propósito:

  • required y optional
  • valid y invalid
  • in-range y out-of-range

En el siguiente ejemplo establecemos un fondo amarillo claro para un campo obligatorio y un fondo rojo cuando trata de procesar el formulario y el campo esta  vacío.

Formulario:

<form action="#" id="form">
    <fieldset>
        <label for="name">
            Nombre <em>*</em>:
            <input type="text" name="name" id="name" value="Pepe" required>
        </label>
    </fieldset>
    <button type="submit">Click Me!</button>
 </form>

Estilo CSS incrustado dentro del HTML:

input:required{
    background-color: lightyellow;
}
input:required:invalid {
    background-color: red;
}

Ver ejemplo 01.05_validation_css.html

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s