Puede realizar una gran cantidad de validación de formularios con solo atributos HTML. Puede hacer que la experiencia del usuario sea bastante limpia y clara con los selectores de CSS. ¡Pero se requieren algunos trucos CSS para que todo salga bien!
(Puede) hacer que la etiqueta parezca un marcador de posición
Primero: siempre usa real elementos. Solo eso es una consideración de UX en la que fallan demasiados formularios. Los marcadores de posición son sugerencias para entradas válidas, como poner “Tulsa” en una entrada etiquetada como “Ciudad”.
Yo diría que si el formulario es corto y un patrón obvio (como registrarse o iniciar sesión), podría usar el patrón visual de marcador de posición, pero use etiquetas reales en su lugar.
Tomando una forma como …
<form action="#0" method="post">
<div>
<input type="text" id="first_name" name="first_name">
<label for="first_name">First Name</label>
</div>
<!-- ... --->
</form>Usas el <div>
form {
max-width: 450px;
// positioning context
> div {
position: relative;
// Looks like placeholder
> label {
opacity: 0.3;
position: absolute;
top: 22px;
left: 20px;
}
}
}No es necesario que hagas cosas complicadas con el cursor, porque ya está todo cableado semánticamente. Si hacen clic en el área ocupada por la etiqueta, se activará la entrada. Si hacen clic en la entrada, se activará la entrada. Ambos correctos.
El truco es poner la entrada primero (semánticamente bien) para que pueda ocultar la etiqueta en el foco:
form {
/* ... */
> div {
> input[type="text"],
> input[type="email"],
> input[type="password"] {
&:focus {
& + label {
opacity: 0;
}
}
}
}
}
Asegúrese de que se requieran ciertas entradas
Quizás la validación más fácil posible en un formulario que puede hacer es usar el required atributo para requerir un campo. ¡No hay forma más rápida de detectar un error que dejar que el navegador lo haga si puede!
<input
required
type="text"
id="first_name"
name="first_name">
Indicar positivamente valores de entrada válidos
Informe a los usuarios que se ha introducido un campo correctamente. El navegador puede darnos esta información a través del :valid Selector de CSS:
form {
> input[type="text"],
> input[type="email"],
> input[type="password"] {
// show success!
&:valid {
background: url(images/check.svg);
background-size: 20px;
background-repeat: no-repeat;
background-position: 20px 20px;
// continue to hide the label
& + label {
opacity: 0;
}
}
}
}
}
:valid, en este caso, es asegurar que se cumpla la condición requerida, pero ese selector también es útil para validar el tipo de entrada.
Mostrar recordatorios sobre la validación del tipo
También puede requerir que el valor de una entrada sea de cierto tipo, como email o number. Aquí hay ejemplos de todos ellos.
<input id="email" name="email" required="" type="email">Esa entrada es obligatoria y obligatoria para tener un formato de dirección de correo electrónico válido. Hagamos esto para la UX:
- Informar al usuario sobre los requisitos cuando el campo está enfocado
- Recuérdeles que el campo no tiene un valor válido de lo contrario
Pero también … no muestre ningún recordatorio cuando la entrada esté vacía. Como en, no asuma un estado inválido. Es un poco molesto e innecesariamente negativo. Para hacer eso, necesitaremos saber si la entrada está vacía o no.
¡Sub truco! Probando si una entrada tiene un valor o no
Queremos hacer cosas con :valid y :invalid, pero no queremos saltar el arma con :invalid y utilícelo antes de que la entrada tenga un valor.
¿Hay un selector de CSS para probar si una entrada está vacía? ¡Realmente no! Pensarías :empty lo sería, pero no lo es. Eso es para hacer coincidir cosas como
… Elementos contenedores sin nada en su interior. Las entradas ya son elementos sin contenido.
El truco consiste en asegurarse de que la entrada tenga un valor de marcador de posición, luego:
input:not(:placeholder-shown) {
}Realmente no estamos usando un marcador de posición en nuestra demostración, pero el valor de un solo espacio funciona:
<input type="text" placeholder=" ">:placeholder-shown es super util para nosotros aqui! Es básicamente el selector secreto para probar si una entrada tiene un valor actualmente o no.
Sin embargo, no hay soporte para IE o Firefox, lo que es particularmente difícil de navegar. Con nuevas funciones como esta, @supports es normalmente un salvador, pero …
/* This doesn't work */
@supports (input:placeholder-shown) {
input:not(:placeholder-shown) {
}
}No puedes usar @supports para selectores, solo propiedades / valores (p. ej. @supports (display: flex))
Probar la compatibilidad con marcadores de posición en JavaScript es bastante fácil:
var i = document.createElement('input');
if ('placeholder' in i) {
}Pero no parece haber una forma sencilla de probar :placeholder-shown. Entonces…. es posible que solo tenga que esperar a que se utilice una compatibilidad más profunda con el navegador en cosas de gran producción.
Suponiendo un apoyo maravilloso, así es como se desarrollaría la lógica …
form {
> div {
> input[type="text"],
> input[type="email"],
> input[type="password"] {
// When input is...
// 1. NOT empty
// 2. NOT in focus
// 3. NOT valid
&:invalid:not(:focus):not(:placeholder-shown) {
// Show a light reminder
background: pink;
& + label {
opacity: 0;
}
}
// When that invalid input becomes in focus (and also still isn't empty)
&:invalid:focus:not(:placeholder-shown) {
// Show the more robust requirement instructions below.
& ~ .requirements {
max-height: 200px;
padding: 0 30px 20px 50px;
}
}
}
// <input> ~
// <label> ~
// <div class="requirements">
.requirements {
padding: 0 30px 0 50px;
color: #999;
max-height: 0;
transition: 0.28s;
overflow: hidden;
color: red;
font-style: italic;
}
}
}
Puede crear validaciones sólidas
No es solo required o type="email" (y similares), también puede validar el lado del cliente cosas como la longitud (por ejemplo, la longitud mínima de la contraseña o los caracteres máximos en el área de texto de la biografía) e incluso utilizar expresiones regulares completas.
Aquí hay un artículo sobre eso. Digamos que desea requisitos de contraseña como
- Al menos 6 caracteres
- Al menos 1 carácter en mayúscula
- Al menos 1 carácter en minúscula
- Al menos 1 número
Puedes hacer eso como:
<input pattern="(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{6,}" type="password" id="password" name="password" required placeholder=" ">
Manifestación
Me voy en el :placeholder-shown cosas aquí, lo que hace que esto no funcione muy bien en Firefox e IE porque es compatible ahora, aparte de IE 11.
Más
- Mihael Konjević: validación en línea en formularios: diseño de la experiencia
- Lista de datos para diferentes tipos de entrada
- Almanaque –
:required,:valid,:invalid,:placeholder,:placeholder-shown