Introduction à la validation des contraintes HTML5

Les sites Web et les applications interactifs ne peuvent être imaginés sans des formulaires nous permettant de se connecter avec nos utilisateurs, et à obtenir les données nous avons besoin afin de sécuriser les transactions avec eux. Nous avons besoin entrée utilisateur valide, Cependant, nous devons l'acquérir d'une manière qui ne pas frustrer nos utilisateurs trop.

Bien que nous puissions améliorer la convivialité de nos formulaires avec des modèles de conception UX judicieusement choisis, HTML5 dispose également d’un mécanisme natif de validation des contraintes qui nous permet de: attraper les erreurs de saisie directement dans le front-end.

Dans ce post, nous allons nous concentrer sur validation des contraintes fournies par le navigateur, et regarder comment les développeurs frontend peuvent sécuriser la saisie de l'utilisateur valide à l'aide de HTML5.

Pourquoi nous avons besoin de la validation d'entrée front-end

Validation d'entrée a deux objectifs principaux. Le contenu que nous obtenons doit être:

1. Utile

Nous avons besoin données utilisables avec lesquelles nous pouvons travailler. Il faut faire entrer les gens données réalistes dans le bon format. Par exemple, personne qui est en vie aujourd'hui n'est né il y a 200 ans. Obtenir des données comme celle-ci peut sembler drôle au début, mais à long terme, c'est ennuyeux et remplit notre base de données avec des données inutiles..

2. sécurisé

En matière de sécurité, cela signifie que nous devons empêcher l'injection de contenu malveillant - délibéré ou accidentel.

L'utilité (obtenir des données raisonnables) peut être atteinte seulement du côté client, l'équipe d'arrière-plan ne peut pas aider trop avec cela. Pour atteindre Sécurité, Les développeurs front-end et backend doivent travailler ensemble.

Si les développeurs frontaux valident correctement les entrées côté client, le l'équipe backend devra faire face à beaucoup moins de vulnérabilités. Pirater (un site) implique souvent soumettre des données supplémentaires, ou données dans le mauvais format. Les développeurs peuvent lutter contre des failles de sécurité comme celles-ci, combattre avec succès depuis le début.

Par exemple, ce guide de sécurité PHP recommande de vérifier tout ce que nous pouvons du côté client. Ils soulignent l’importance de la validation des entrées frontales en donnant de nombreux exemples, tels que:

"La validation d'entrée fonctionne mieux avec des valeurs extrêmement restreintes, par exemple lorsqu'un élément doit être un entier, une chaîne alphanumérique ou une URL HTTP."

Dans la validation des entrées frontales, notre travail consiste à imposer des contraintes raisonnables sur l'entrée de l'utilisateur. La fonctionnalité de validation des contraintes de HTML5 nous donne les moyens de le faire.

Validation de contrainte HTML5

Avant HTML5, les développeurs frontaux étaient limités à validation de la saisie de l'utilisateur avec JavaScript, ce qui était un processus fastidieux et sujet aux erreurs. Pour améliorer la validation des formulaires côté client, HTML5 a introduit un validation de contrainte algorithme qui fonctionne dans les navigateurs modernes, et vérifie la validité de l'entrée soumise.

Pour faire l’évaluation, l’algorithme utilise le attributs de validation des éléments d'entrée, tel que , </code>, et <code><select></code>. Si vous voulez savoir comment la validation des contraintes se déroule pas à pas dans le navigateur, consultez ce document WhatWG.</p> <p>Grâce à la fonctionnalité de validation des contraintes de HTML5, nous pouvons exécuter tous <strong>tâches de validation d'entrée standard</strong> côté client <strong>sans JavaScript, uniquement avec HTML5</strong>.</p> <p>Pour effectuer des tâches plus complexes liées à la validation, HTML5 nous fournit une <strong>API JavaScript de validation de contrainte</strong> nous pouvons utiliser pour configurer nos scripts de validation personnalisés.</p> <h4>Valider avec des types d'entrée sémantiques</h4> <p>HTML5 a introduit <strong>types d'entrées sémantiques</strong> que, mis à part la signification de l'élément pour les agents utilisateurs, peut également être utilisé pour <strong>valider la saisie de l'utilisateur</strong> en limitant les utilisateurs à un certain format d'entrée.</p> <p>Outre les types de saisie qui existaient déjà avant HTML5 (<code>texte</code>, <code>mot de passe</code>, <code>soumettre</code>, <code>réinitialiser</code>, <code>radio</code>, <code>case à cocher</code>, <code>bouton</code>, <code>caché</code>), on peut aussi utiliser le suivant <strong>types d'entrée HTML5 sémantique</strong>: <code>email</code>,<code>tel</code>,<code>url</code>,<code>nombre</code>,<code>temps</code>,<code>rendez-vous amoureux</code>,<code>date / heure</code>,<code>datetime-local</code>, <code>mois</code>,<code>la semaine</code>, <code>intervalle</code>, <code>chercher</code>,<code>Couleur</code>.</p> <p>Nous pouvons utiliser en toute sécurité les types de saisie HTML5 avec les anciens navigateurs, car ils se comporteront comme <code><input type="text"></code> champ dans les navigateurs qui ne les prennent pas en charge.</p> <p>Voyons ce qui se passe lorsque l'utilisateur entre le mauvais type d'entrée. Supposons que nous ayons créé un champ de saisie contenant le code suivant:</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="youremail">Votre email:</label> <input type="email" name="email"> <input type="submit" value="Submit"> </form> </pre> <p>Lorsque l'utilisateur tape une chaîne qui n'utilise pas de format de courrier électronique, l'algorithme de validation de contrainte <strong>ne soumet pas le formulaire</strong>, et <strong>renvoie un message d'erreur</strong>:</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.jpg"></figure><p>La même règle s’applique également aux autres types d’entrée, par exemple pour <code>type = "url"</code> les utilisateurs peuvent uniquement soumettre une entrée qui suit le format de l'URL (commence par un protocole, tel que <code>http: //</code> ou <code>ftp: //</code>).</p> <p>Certains types d’entrée utilisent une conception qui <strong>ne permet même pas aux utilisateurs d'entrer un mauvais format d'entrée</strong>, par exemple <code>Couleur</code> et <code>intervalle</code>.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="bgcol">Couleur de fond:</label> <input type="color" name="color"> <input type="submit" value="Submit"> </form> </pre> <p>Si nous utilisons le <code>Couleur</code> type d'entrée l'utilisateur est contraint de choisir une couleur dans le sélecteur de couleurs ou de conserver le noir par défaut. Le champ de saisie est <strong>contraint par la conception</strong>, donc il ne laisse pas beaucoup de chance pour l'erreur de l'utilisateur.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_2.jpg"></figure><p>Lorsque cela est approprié, vous pouvez envisager d'utiliser le <code><select></code> Balise HTML qui fonctionne de manière similaire à ces types d’entrée contrainte par la conception; il permet aux utilisateurs de choisir dans une liste déroulante.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="favfruit">Votre fruit préféré:</label> <select name="fruit"> <option value="apple">Pomme</option> <option value="pear">Poire</option> <option value="orange">Orange</option> <option value="raspberry">Framboise</option> </select> <input type="submit" value="Submit"> </form> </pre> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_3.jpg"></figure><h4>Utiliser les attributs de validation de HTML5</h4> <p>L'utilisation de types d'entrée sémantiques impose certaines contraintes sur ce que les utilisateurs sont autorisés à soumettre, mais dans de nombreux cas, nous souhaitons aller un peu plus loin. C'est quand le <strong>attributs liés à la validation</strong> du <code><input></code> tag peut nous aider.</p> <p>Les attributs liés à la validation appartiennent à certains types d’entrée (ils ne peuvent pas être utilisés <em>tout</em> types) sur lesquels ils imposent des contraintes supplémentaires.</p> <h5>1. <code>Champs obligatoires</code> pour obtenir une entrée valide par tous les moyens</h5> <p>le <code>Champs obligatoires</code> attribut est l'attribut de validation HTML le plus connu. C'est un <strong>attribut booléen</strong> ce qui veut dire <strong>ne prend aucune valeur</strong>, nous devons simplement le placer à l'intérieur du <code><input></code> tag si on veut l'utiliser:</p> <pre name="code"> <input type="email" name="email" required> </pre> <p>Si l'utilisateur oublie de saisir une valeur dans un champ de saisie obligatoire, le navigateur <strong>renvoie un message d'erreur</strong> qui les avertit de remplir le champ, et ils <strong>ne peut pas soumettre le formulaire</strong> jusqu'à ce qu'ils aient fourni une entrée valide. C'est pourquoi il est important de toujours <strong>marquer visuellement</strong> champs obligatoires pour les utilisateurs.</p> <p>le <code>Champs obligatoires</code> attribut peut être <strong>utilisé avec les types d'entrée suivants</strong>: <code>texte</code>, <code>chercher</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>mot de passe</code>, <code>rendez-vous amoureux</code>, <code>date / heure</code>, <code>datetime-local</code>, <code>mois</code>, <code>la semaine</code>,<code>temps</code>, <code>nombre</code>, <code>case à cocher</code>, <code>radio</code>, <code>fichier</code>, plus avec le <code><textarea></code>et <code><select></code> Balises HTML.</p> <h5>2. <code>min</code>, <code>max</code> et <code>étape</code> pour la validation du numéro</h5> <p>le <code>min</code>, <code>max</code> et <code>étape</code> les attributs nous permettent de <strong>mettre des contraintes sur les champs de saisie numérique</strong>. Ils peuvent être utilisés avec le <code>intervalle</code>, <code>nombre</code>, <code>rendez-vous amoureux</code>, <code>mois</code>, <code>la semaine</code>, <code>date / heure</code>, <code>datetime-local</code>, et <code>temps</code> types d'entrée.</p> <p>le <code>min</code> et <code>max</code> les attributs fournissent un excellent moyen de facilement <strong>exclure les données déraisonnables</strong>. Par exemple, l'exemple ci-dessous oblige les utilisateurs à soumettre un âge compris entre 18 et 120 ans..</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourage">Ton âge:</label> <input type="number" name="age" min="18" max="120"> <input type="submit" value="Submit"> </form> </pre> <p>Lorsque l’algorithme de validation de contrainte se heurte à une entrée utilisateur plus petite que le <code>min</code>, ou plus grand que le <code>max</code> valeur, il l’empêche d’atteindre le serveur et renvoie un message d’erreur.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_4.jpg"></figure><p>le <code>étape</code> attribut <strong>spécifie un intervalle numérique</strong> entre les valeurs légales d'un champ de saisie numérique. Par exemple, si nous voulons que les utilisateurs choisissent uniquement les années bissextiles, nous pouvons ajouter le <code>step = "4"</code> attribuer au champ. Dans l'exemple ci-dessous, j'ai utilisé le <code>nombre</code> type d'entrée, car il n'y a pas <code>type = "année"</code> en HTML5.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourleapyear">Votre année bissextile préférée:</label> <input type="number" name="leapyear" min="1972" max="2016" step="4"> <input type="submit" value="Submit"> </form> </pre> <p>Avec les contraintes prédéfinies, les utilisateurs ne peuvent choisir d’années bissextiles entre 1972 et 2016 que s’ils utilisent la petite flèche vers le haut fournie avec le logiciel. <code>nombre</code> type d'entrée. Ils peuvent également saisir manuellement une valeur dans le champ de saisie, mais si cela n’est pas conforme aux contraintes, le navigateur renvoie un message d’erreur..</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.gif"></figure><h5>3. <code>longueur maximale</code> pour la validation de la longueur du texte</h5> <p>le <code>longueur maximale</code> attribut permet de <strong>définir une longueur de caractère maximale</strong> pour les champs de saisie textuelle. Il peut être utilisé avec le <code>texte</code>, <code>chercher</code>, <code>url</code>, <code>tel</code>, <code>email</code> et <code>mot de passe</code> types d'entrée, et avec le <code><textarea></code> Balise HTML.</p> <p>le <code>longueur maximale</code> Cet attribut peut être une excellente solution pour les champs de numéro de téléphone ne pouvant pas comporter plus d'un certain nombre de caractères, ou pour les formulaires de contact pour lesquels nous ne voulons pas que les utilisateurs écrivent plus d'une certaine longueur..</p> <p>L'extrait de code ci-dessous montre un exemple pour ce dernier. Il contraint les messages des utilisateurs à 500 caractères.. </p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourmsg">Message (maximum 500 caractères):</label> <textarea name="msg" cols="25" rows="4" maxlength="500">

le longueur maximale attribut ne renvoie pas de message d'erreur, mais le navigateur ne permet tout simplement pas aux utilisateurs de saisir plus que le nombre de caractères spécifié. C'est pourquoi il est crucial de informer les utilisateurs sur la contrainte, sinon, ils ne comprendront pas pourquoi ils ne peuvent pas continuer à taper.

 4. modèle pour validation Regex
 le modèle attribuer nous permet de utiliser des expressions régulières dans notre processus de validation des entrées. Une expression régulière est un jeu de caractères prédéfini qui forment un certain motif. Nous pouvons l'utiliser soit pour rechercher des chaînes qui suivent le modèle, soit pour appliquer un certain format défini par le modèle.
 Avec le modèle attribut nous pouvons faire le dernier - contraindre les utilisateurs à soumettre leurs entrées dans un format qui correspond à l'expression régulière donnée.
  le modèle attribut a de nombreux cas d'utilisation, mais il peut être particulièrement utile lorsque nous voulons valider un mot de passe.
 L'exemple ci-dessous nécessite que les utilisateurs entrent un mot de passe d'au moins 8 caractères et contenant au moins une lettre et un chiffre (source de l'expression rationnelle que j'ai utilisée).. 
   * Votre mot de passe:   
 
 Encore quelques choses
 Dans cet article, nous avons examiné comment utiliser le validation de formulaire fournie par le navigateur fourni par l'algorithme de validation de contrainte native de HTML5. Pour créer nos scripts de validation personnalisés, nous devons utiliser l'API de validation de contrainte qui peut être l'étape suivante dans le perfectionnement des compétences de validation de formulaire..
 Les formulaires HTML5 sont accessibles par les technologies d'assistance, de sorte que nous n'avons pas nécessairement à utiliser le aria-required Attribut ARIA pour marquer les champs de saisie obligatoires pour les lecteurs d'écran. Toutefois, il peut toujours être utile d’ajouter une prise en charge de l’accessibilité pour les anciens navigateurs. Il est également possible de désactiver la validation de contrainte en ajoutant le novalidate attribut booléen à la 
 élément.