Validar formularios en HTML5

Validar formularios en HTML5

Hasta ahora, cuando teníamos que validar un formulario lo hacíamos mediante JavaScript, revisando que se cumplieran ciertas condiciones y en caso positivo procesando el formulario o en caso negativo lanzando un error.

Con la llegada de HTML5 la validación de formularios se simplifica bastante, no teniendo que hacer uso en muchos casos de JavaScript, gracias a nuevos atributos que se añaden a las etiquetas de los formularios en HTML5.

Veamos algunos de estos atributos de validación de formularios en HTML5 y cómo manejarlos:

required

<input email="email" required >

Con el parámetro required en la etiqueta <input> hacemos que este campo sea obligatorio, y no enviará el formulario hasta no ser completado éste.

pattern

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

Con pattern podemos establecer un patrón, que debe cumplirse en el campo introducido. En el ejemplo, el patrón indica que el campo telefono debe estar compuesto por 2 cifras iniciales (el prefijo) seguidas de un espacio y 9 cifras (el número), osea algo como “12 123456789”. En caso de no cumplirse el patrón, el formulario no será enviado.

maxlength

<textarea name="mensaje" maxlength="100"></textarea>

Con maxlength controlamos la longitud máxima del campo. En el ejemplo, el campo mensaje no puede tener más de 100 caracteres.

Estas características de HTML5 no hacen innecesario el uso de JavaScript, que sigue siendo complementario, y de hecho también se están proponiendo métodos para interactuar con JavaScript.

Por otro lado, CSS también interactúa de forma sencilla con los formularios en HTML5, por ejemplo, mediante el pseudoselector “ :invalid ” podemos definir un estilo personalizado para los elementos del formulario no válidos:

:invalid {
border: 1px red solid;
}
¡¡ Comenta este artículo en los foros !!
comenta

Deja un comentario en: “Validar formularios en HTML5

  • 28 de noviembre de 2010 en 3:34 pm
    Permalink

    Hola.
    Muchas gracias por esta información tan valiosa. Estoy tratando de aprender bien la etiqueta pattern.
    Entiendo el ejemplo que han puesto.
    Me gustaría saber si puedo pedir que se utilize un determinado número de cifras y determinado número de letras pero de forma aleatoria( no necesariamente letras despues de cifras o viceversa). Y si puedo hacer lo mismo pero exigiendo el mínimo número de ambos , no el exacto.Ejemplo: contraseña con mínimo de 8 caracteres siendo al menos dos de ellos letras.
    Muchísimas gracias.

Los comentarios están cerrados.