Share
TL; DR Remplacez votre validation JavaScript par une validation HTML5. C'est plus facile que vous ne le pensez et vous donne une tonne de contrôle de marquage et de style. Essayez cette démo:
Donc, vous devez valider un formulaire. Vous faites le bon choix et commencez avec la validation côté serveur. Ensuite, si vous êtes un bon concepteur Web, vous ajoutez une validation côté client afin que vos utilisateurs puissent savoir s'ils ont rempli le formulaire correctement ou non. Si vous êtes un très bon concepteur de sites Web, vous pouvez même faire ce commentaire instantanément, de sorte que l'utilisateur est informé qu'il a saisi une adresse email valide dès que celle-ci devient une adresse email valide..
Vous accédez à votre bibliothèque jQuery préférée. Peut-être que vous êtes même assez cool pour utiliser une bibliothèque JavaScript vanille.
Vous ajoutez des balises supplémentaires. Re-style des choses… ajouter quelques règles de validation JavaScript. Connectez le JavaScript au serveur via AJAX. Cognez votre tête contre le clavier à quelques reprises parce que vous ne l'avez pas fait depuis quelques mois et que vous devez rechercher exactement comment cette nouvelle bibliothèque de validation JavaScript fonctionne… et ainsi de suite..
Vous obtenez l'image. Ce n'est pas amusant.
Et si vous pouviez ignorer tout ce qui concerne JavaScript et simplement valider avec les validateurs d'attributs HTML5 et CSS?
En gros: vous ajoutez des attributs comme Champs obligatoires ou type = "email" à champs et votre navigateur fait le reste.
Allez-y et essayez de soumettre le formulaire dans cette démo CodePen sans contenu. Puis essayez de le soumettre sans une adresse email valide:
Vous avez peut-être remarqué que vous pouvez entrer un email comme a @ a. Clairement, vous voulez une vraie adresse e-mail. Ainsi, en spécifiant un modèle précis auquel nos données doivent correspondre, nous pouvons valider ce qui est entré. Faisons en sorte que cela corresponde au modèle qui consiste à avoir un point et deux ou trois caractères à la fin. Nous pouvons le faire en utilisant le modèle attribuer et regex.
Si vous êtes hésitant à apprendre regex, vous devez vous en remettre. Regex est incroyablement puissant et dans tous les types de programmation que vous ferez.
Je suis épouvantable avec les expressions rationnelles compliquées, j'ai donc cherché Google pour «email regex» (puisque je suis sûr que cela a déjà été résolu) et j'ai fini par en trouver un sur regular-expressions.info. Voici notre regex sur regex101.com (une ressource très utile pour tester vos expressions régulières).
^ [A-Za-z0-9 ._% + -] + @ [A-Za-z0-9 .-] + \. [A-Za-z] 2, $
Si vous lisez un peu sur le motif, vous réaliserez que l'auteur exclut les correspondances en minuscules, car ils s'attendent à ce que vous utilisiez un indicateur ne respectant pas la casse. Les modèles de saisie HTML5 n'acceptent pas les drapeaux. Par conséquent, pour obtenir des lettres minuscules, nous devons ajouter la plage majuscule et minuscule (par exemple,. A-Za-z). Vous pouvez lire exactement ce que chaque partie du motif fait dans le panneau de droite.
Pour que nos erreurs de validation jettent autre chose que "Mauvais format!", Nous pouvons spécifier un Titre attribuer avec une erreur de validation, comme ceci:
Maintenant, essayez l'entrée email dans cette démo:
Ne vous inquiétez pas, vous n’aurez pas à écrire des modèles insensés pour chaque entrée que vous avez. La plupart du temps, vous voudrez simplement demander quelque chose et vous assurer qu'il s'agit d'un certain type de données. Par exemple, un nombre supérieur à 5 pourrait ressembler à .
N'oubliez pas que tous les navigateurs ne prennent pas en charge tous les attributs de validation. Par exemple, FireFox ne supporte pas Longueur minimale. modèle supporte plutôt bien, donc vous pouvez toujours reproduire les fonctionnalités. Longueur minimale peut être répliqué avec modèle = ". 3," où 3 est cependant long il doit être.
Si vous ne trouvez pas un modèle auquel vous avez accès dans votre ancienne bibliothèque JavaScript, vous pouvez probablement le trouver en parcourant leur code source, car au final, la bibliothèque JavaScript correspond exactement aux mêmes modèles regex que nous..
Ne serait-il pas intéressant que notre entrée affiche une sorte d'indication lorsqu'elle est valide? Heureusement, il y a un :valide Sélecteur CSS pour cela. Il y a aussi un :invalide sélecteur. Entrez votre nom dans cette démo:
Vous remarquerez la mise en garde évidente selon laquelle les styles non valides apparaissent avant même que nous ayons touché l'entrée..
Vous pourriez penser à faire quelque chose comme : invalide: pas (: vide) mais cela ne fonctionnera pas car les navigateurs sont stupides et considèrent toujours les éléments de formulaire vides.
Nous pourrions faire de la supercherie avec le nouveau : espace réservé-montré pseudo-sélecteur, comme indiqué dans la démo suivante, mais le support du navigateur pour : espace réservé-montré est horrible et il n’existe pas encore de polyfill moderne. Bummer.
Pour le moment, notre meilleur pari est d'ajouter du JavaScript pour basculer d'une classe selon que l'entrée est vide ou non. Voici la démo de travail:
Ce que je préfère dans cette approche, c’est que vous avez un contrôle CSS complet sur chaque élément de votre formulaire..
En poussant le sous le nous avons accès au sélecteur de fratrie adjacent sur notre .vide classe. Nous pouvons ensuite créer un faux espace réservé qui glisse magnifiquement dès que l'entrée n'est plus vide. Voici un exemple:
Si la être sous la n’offense pas votre sensibilité ou n’est pas assez accessible, vous pouvez toujours modifier le JavaScript pour ajouter le vide classe à la au lieu. Ensuite, il suffit de modifier légèrement le CSS. Voici un exemple le faisant de cette façon:
Les classes de validation fonctionnent également sur le élément afin que vous puissiez vraiment devenir fou avec le contrôle de style.
Il n'y a pas de limite à ce que vous pouvez faire avec cette approche. Quelques idées:
Il n'y a aucun moyen de styliser les messages de validation. Les navigateurs ont désactivé la possibilité de styliser ceux-ci. Je ne pense pas nécessairement que ce soit une mauvaise chose, car les gens seront habitués à ces styles de validation. En fait, c’est probablement pour cette raison que les navigateurs ont décidé de nous priver de notre accès. Maintenant ils sont standardisés.
Ils sont également hors du flux de la page afin que vous n'ayez pas à vous inquiéter du fait qu'ils déplacent des éléments de forme avec leur apparence..
Si vous avez absolument besoin d'un contrôle complet sur les styles de validation, cette méthode peut ne pas vous convenir..
Je suis enthousiaste à l'idée de recevoir des commentaires à ce sujet et j'aimerais beaucoup découvrir des styles / techniques de validation intéressants!
Le blog “Adaptive Placeholders” de Danny King m'a fait réfléchir.
Accentsconagua