Teoría
Teoría

Pseudoclases :invalid y :valid

Con los tipos de campo, como email o url, y atributos como pattern, min y max, podemos indicar al navegador qué datos esperamos.

Por ejemplo, email espera una dirección de correo y url, una dirección web completa. El atributo pattern define un patrón que debe cumplir el texto; el campo de pasaporte muestra un ejemplo del formato esperado.

La pseudoclase :valid selecciona los elementos cuyo valor cumple los requisitos.

La pseudoclase :invalid selecciona los elementos cuyo valor no los cumple.

Por ejemplo:

input:invalid {}

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <title>Pseudoclases :invalid y :valid</title> <meta charset="utf-8"> <link rel="stylesheet" href="course.css"> <link rel="stylesheet" href="style.css"> </head> <body> <header class="page-header">Formulario de datos personales</header> <main> <form action="https://echo.htmlacademy.ru/courses" method="post"> <fieldset> <legend>Solicitud de visa para la cocina</legend> <div class="half-width"> <label>Nombre del gato</label> <input type="text" name="name" value="Cupcakecito"> </div> <div class="half-width"> <label>Pasaporte felino</label> <input type="text" name="passport" value="PASAPORTE DE CUPCAKE" pattern="[A-z]{4}-[0-9]{5}" placeholder="ABCD-12345"> </div> <label>E-mail</label> <input type="email" name="email" value="Cupcake arroba ejemplo.com"> <label>Sitio web</label> <input type="url" name="website" value="HTMLAcademy"> <div class="half-width"> <label>Fecha de solicitud</label> <input type="datetime" name="date" value="02-06-2014"> </div> <div class="half-width"> <label>Firma</label> <input type="text" name="sign" value="Aquí estuvo Cupcake"> </div> </fieldset> <div class="buttons"> <input type="submit" value="Enviar"> </div> </form> </main> <footer class="page-footer"></footer> </body> </html>

CSS

ObjetivosRealizado

A todos los elementos input con valores válidos, asígnales el color de texto #2ecc71.
A todos los elementos input cuyos valores no cumplen los requisitos, asígnales el color de texto #e74c3c.

Observa que al completar la primera meta cambia el color de los campos y también el del botón.