Validación de formas en HTML5

DHTML
Validación de formas en HTML5
Verificando que se llene un campo
Atributo required
El atributo required es booleano.
Especifica cuando un campo de entrada de una forma HTML5 debe llenarse obligatoriamente.
Puede utilizarse con los siguientes tipos de input:
text, search, url, tel, email, password, date pickers, number, checkbox, radio, y file.
Verificando que se llene un campo
Ejemplo
<form action="servidor.html" method="get">
Nombre: <input type="text" name="nombre" required /><br>
<input type="submit" value="enviar"/>
</form>
Verificando que se llene un campo
Ejemplo
Select required
<form action="servidor.html" method="get">
<select required>
<option selected disabled value="">seleccionar un color</option>
<option value="red">red</option>
<option value="yellow">yellow</option>
<option value="green">green</option>
<option value="grey">grey</option><input type="submit" value="enviar"/>
</form>
Autovalidación
Algunos tipos de input se validan automáticamente. El
browser verifica el contenido del input respete cierto
formato se aplica en email, number, url.
Autovalidación
<form action="servidor.html" method="get">
Cantidad: <input type="number" name="cantidad" >
<input type="submit" value="enviar">
</form>
Restricciones
Pattern
El atributo pattern permite expresar el patron específique que se quiere validar.
Se define mediante expresiones regulares. Puede ser usado con los tipos:
text, search, url, tel, email, y password
Pattern
<form action="servidor.html" method="get">
Código país: <input type="text"
name="country_code" pattern="[A-Za-z]{3}" title="Código de 3 letras">
<br><input type="submit" value="enviar">
</form>
La pseudo clase :invalid
<style>
input:invalid {background:yellow}
</style>
<form action="servidor.html" method="get">
Nombre: <input type="text" name="nombre"
required /><br>
<input type="submit" value="enviar"/>
</form>
El fondo del campo
permanence Amarillo
hasta que su contenido
sea válido.