Share
TL; DR Reemplace su validación de JavaScript con la validación de HTML5. Es más fácil de lo que piensa y le brinda un montón de control de marcado y estilo. Prueba esta demo:
Así que necesitas validar un formulario. Usted hace lo correcto y comienza con la validación del lado del servidor. Luego, si usted es un buen diseñador web, agregue alguna validación del lado del cliente para que los usuarios obtengan comentarios sobre si llenaron el formulario correctamente o no. Si usted es un diseñador web realmente bueno, puede incluso hacer esa retroalimentación instantánea, de modo que el usuario sepa que ingresó una dirección de correo electrónico válida tan pronto como se convierta en una dirección de correo electrónico válida.
Usted alcanza para su biblioteca jQuery favorita. Tal vez eres lo suficientemente genial como para usar una biblioteca de JavaScript de vainilla.
Usted agrega un margen de beneficio adicional. Cambia el estilo de algunas cosas ... agrega algunas reglas de validación de JavaScript. Conecte el JavaScript al servidor a través de AJAX. Golpee su cabeza contra el teclado varias veces porque no lo ha hecho en un par de meses y tiene que buscar exactamente cómo esa nueva biblioteca de validación de JavaScript hace las cosas ... Y así sucesivamente.
Te dan la imagen. No es divertido.
¿Qué pasaría si pudiera omitir todas esas cosas de JavaScript y simplemente validar con validadores de atributos HTML5 y CSS??
En términos generales: se agregan atributos como necesario o type = "email" a campos y su navegador hace el resto.
Continúe e intente enviar el formulario en esta demostración de CodePen sin contenido. A continuación, intente enviarlo sin una dirección de correo electrónico válida:
Es posible que hayas notado que puedes ingresar un email como Automóvil club británico. Es evidente que desea una dirección de correo electrónico real, por lo que al especificar un patrón preciso que nuestros datos deben coincidir, podemos validar lo que se ingresó. Asegurémonos de que coincida con el patrón de tener un punto y dos o tres caracteres al final. Podemos hacer esto usando el modelo atributo y expresiones regulares.
Si eres tentativo de aprender expresiones regulares, necesitas superarlo. Regex es increíblemente potente y en todos los tipos de programación que harás.
Soy terrible en las expresiones regulares complicadas, así que busqué en Google para "expresiones regulares de correo electrónico" (ya que estoy seguro de que esto ya se resolvió) y terminé encontrando una en regular-expressions.info. Aquí está nuestra expresión regular en regex101.com (un recurso muy útil para probar sus expresiones regulares).
^ [A-Za-z0-9 ._% + -] + @ [A-Za-z0-9 .-] + \. [A-Za-z] 2, $
Si lees un poco sobre el patrón, te darás cuenta de que el autor excluyó las coincidencias en minúsculas porque esperan que uses una marca que no distinga mayúsculas y minúsculas. Los patrones de entrada de HTML5 no aceptan marcas, por lo que para obtener letras minúsculas necesitamos agregar el rango en mayúsculas y minúsculas (por ejemplo,. A-Za-z). Puede leer exactamente lo que hace cada parte del patrón en el panel derecho.
Para hacer que nuestros errores de validación arrojen algo distinto a “¡Formato incorrecto!” Podemos especificar un título atributo con un error de validación, como este:
Ahora pruebe la entrada de correo electrónico en esta demostración:
No se preocupe, no tendrá que escribir patrones locos para cada entrada que tenga. La mayoría de las veces solo querrá requerir algo y asegurarse de que sea un tipo de datos determinado. Por ejemplo, un número por encima de 5 podría parecer .
Tenga en cuenta que no todos los navegadores admiten todos los atributos de validación. Por ejemplo, FireFox no soporta longitud mínima. modelo Sin embargo, tiene un soporte bastante bueno, por lo que siempre puedes replicar la funcionalidad.. longitud mínima se puede replicar con patrón = ". 3," dónde 3 es por mucho tiempo que tiene que ser.
Si no puede encontrar un patrón al que tuvo acceso en su antigua biblioteca de JavaScript, probablemente lo pueda encontrar al buscar su código fuente, ya que, en última instancia, la biblioteca de JavaScript coincide exactamente con los mismos patrones de expresiones regulares que nosotros..
¿No sería bueno que nuestra entrada mostrara algún tipo de indicación cuando fuera válida? Afortunadamente, hay una :válido Selector de CSS para eso. También hay un :inválido selector. Ingrese su nombre en esta demostración:
Notará la obvia advertencia de que los estilos no válidos aparecen incluso antes de que hayamos tocado la entrada.
Podrías pensar en hacer algo como : inválido: no (: vacío) pero no funcionará porque los navegadores son estúpidos y siempre consideran elementos de formulario vacíos.
Podríamos hacer algunos trucos con el nuevo. : marcador de posición mostrado pseudo-selector como se muestra en la siguiente demostración, pero el soporte del navegador para : marcador de posición mostrado Es horrible y no hay todavía un polyfill moderno para eso. Gorrón.
Por ahora, nuestra mejor apuesta es agregar algo de JavaScript para alternar una clase dependiendo de si la entrada está vacía o no. Aquí está la demostración de trabajo:
Mi parte favorita de este enfoque es que tienes un control completo de CSS sobre cada bit de tu formulario.
Empujando el bajo la Tenemos acceso al selector de hermanos adyacente en nuestro .vacío clase. Luego, podemos crear un marcador de posición falso que se desliza maravillosamente fuera del camino tan pronto como la entrada ya no esté vacía. Aquí hay un ejemplo:
Si el estar bajo el ofende tu sensibilidad o no está lo suficientemente accesible, siempre puedes modificar el JavaScript para agregar el vacío clase a la en lugar. Entonces solo es cuestión de ajustar un poco el CSS. Aquí hay un ejemplo haciéndolo de esa manera:
Las clases de validación también funcionan en el Elemento para que realmente pueda volverse loco con control de estilo.
No hay límite a lo que puedes hacer con este enfoque. Algunas ideas:
No hay forma de estilizar los mensajes de validación. Los navegadores deshabilitaron la habilidad de diseñarlos. No necesariamente creo que esto sea algo malo, ya que la gente estará acostumbrada a estos estilos de validación. De hecho, es probable que esa sea la razón por la que los navegadores decidieron restringir nuestro acceso a ellos. Ahora están estandarizados..
También están fuera del flujo de la página, por lo que no tiene que preocuparse de que empujen los elementos del formulario con su apariencia..
Si necesita absolutamente un control completo sobre los estilos de validación, este método podría no ser para usted.
Estoy emocionado de recibir comentarios sobre esto y me encantaría ver algunos estilos / técnicas de validación geniales!
La publicación del blog de Danny King “Adaptive Placeholders” me hizo pensar en esto.
Accentsconagua