La característica de validación de HTML5 más simple es el atributo required (en-US)"). Añade este atributo al elemento para que una entrada sea obligatoria. Cuando se establece este atributo, el elemento coincide con la pseudoclase de la interfaz de usuario :required y el formulario no se envía; muestra un mensaje de error al enviarlo si la entrada está vacía. Si está vacía, la entrada también se considera inválida, coincidiendo con la pseudoclase de interfaz de usuario :invalid.

Añade un atributo required a tu entrada, como se muestra a continuación.

Ten en cuenta el CSS que en el archivo de ejemplo se ha incluido:

Este CSS da un borde discontinuo rojo cuando la entrada no es válida, y un borde negro sólido más sutil cuando es válida. También añadimos un gradiente de fondo cuando la entrada es obligatoria y no válida. Prueba el nuevo comportamiento en el ejemplo siguiente:

Ver Resultado

Intenta enviar el formulario sin introducir ningún valor. Observa que la entrada no válida recibe el cursor, aparece un mensaje de error predeterminado («Complete este campo») y el formulario no se puede enviar.

La presencia del atributo required en cualquier elemento que admite este atributo significa que el elemento coincide con la pseudoclase :required, tenga o no un valor. Si en el elemento <input> no se ha introducido ningún valor, input coincidirá con la pseudoclase :invalid.