Validación de formularios HTML5 más feliz en Vue

Es interesante lo que podemos hacer input:invalid {}en CSS para aplicar estilo a una entrada cuando está en un estado no válido. Sin embargo, usado exactamente así, la UX es bastante mala. Di que tienes input type="text" required. Eso es inmediatamente inválido antes de que el usuario haya hecho algo. Es una experiencia de usuario tan fastidiosa que nunca la verás utilizada en la naturaleza. Pero si pudiéramos evitar eso, ese :invalidselector puede hacer un montón de trabajo por nosotros en la validación de formularios sin necesidad de apoyarnos en una biblioteca grande y sofisticada.

Dave tiene una idea que es una variación de la idea original de 2017 .

Es básicamente:

form.errors :invalid {  outline: 2px solid red;}

Ahora solo está aplicando condicionalmente esos estilos de error nativos cuando haya determinado que el formulario está en un estado de error y haya agregado una clase. Y, afortunadamente, probarlo también es bastante fácil. Podríamos aplicar esa clase cuando se hace clic en el botón enviar:

submitButton.addEventListener("click", (e) = {  form.classList.toggle("errors", !form.checkValidity())});

O podrías hacerlo cuando una entrada se vuelve borrosa o algo así. Incluso podría envolver cada conjunto de entradas en un contenedor y alternar la clase en el contenedor cuando sea apropiado. El código comentado aquí podría llevarlo allí…

Dave le pasó esta idea a Vue:

Inicializamos el componente del formulario errors: falseporque no queremos que aparezca el estilo de error hasta que el usuario haya enviado el formulario. La invalidateFormfunción simplemente establece this.error = true. Ese es un problema con la :invalidpseudoclase CSS: es demasiado exigente. Al conectarse a los invalideventos, se retrasa el estilo hasta que después del primer intento de envío del formulario sabemos que el formulario tiene errores.

No usar ninguna biblioteca (además de la que ya usas) es bastante bueno. La validación de formularios HTML prácticamente está ahí. Aquí hay una bifurcación de Dave donde también se revelan mensajes de error: