hideout-lastation.com
Introduction à la validation des contraintes HTML5
Les sites Web interactifs et les applications ne peuvent être imaginés sans formulaires qui nous permettent de communiquer avec nos utilisateurs, et d' obtenir les données dont nous avons besoin afin de sécuriser les transactions avec eux. Nous avons besoin d'une entrée d'utilisateur valide, mais nous devons l'acquérir d'une manière qui ne gêne pas trop nos utilisateurs.
Bien que nous puissions améliorer la convivialité de nos formulaires avec des modèles de conception UX intelligemment choisis, HTML5 dispose également d'un mécanisme natif de validation des contraintes qui nous permet d' intercepter les erreurs de saisie directement dans le frontal .
Dans cet article, nous nous concentrerons sur la validation des contraintes fournie par le navigateur, et examinerons comment les développeurs frontend peuvent sécuriser les entrées des utilisateurs via HTML5 .
Pourquoi nous avons besoin d'une validation d'entrée frontale
La validation des entrées a deux objectifs principaux. Le contenu que nous recevons doit être:
1. Utile
Nous avons besoin de données utilisables avec lesquelles nous pouvons travailler . Nous devons amener les gens à entrer des données réalistes dans le bon format . Par exemple, personne qui est vivant aujourd'hui est né il y a 200 ans. Obtenir des données comme celles-ci peut sembler amusant au début, mais à long terme c'est ennuyeux, et il remplit notre base de données de données inutiles.
2. Sécurisé
Lorsque vous faites référence à la 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) ne peut être atteinte que du côté du client, l'équipe de backend ne peut pas aider trop avec ceci. Pour atteindre la sécurité, les développeurs front-end et backend doivent travailler ensemble .
Si les développeurs frontend valident correctement les entrées côté client, l' équipe backend devra gérer beaucoup moins de vulnérabilités . Le piratage (un site) implique souvent de soumettre des données supplémentaires ou des données dans le mauvais format . Les développeurs peuvent lutter contre les failles de sécurité comme celles-ci, se battre avec succès depuis le front-end.
Par exemple, ce guide de sécurité PHP recommande de vérifier tout ce que nous pouvons sur le 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 quand quelque chose doit être un entier, ou une chaîne alphanumérique, ou une URL HTTP."
Dans la validation d'entrée frontend, notre travail consiste à imposer des contraintes raisonnables à l'entrée de l'utilisateur. La fonction de validation des contraintes de HTML5 nous fournit les moyens de le faire.
Validation de contrainte HTML5
Avant HTML5, les développeurs frontend étaient limités à la validation des entrées 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 algorithme de validation des contraintes qui s'exécute dans les navigateurs modernes et vérifie la validité de l'entrée soumise .
Pour effectuer l'évaluation, l'algorithme utilise les attributs liés à la validation des éléments d'entrée, tels que , </code>, and <code><select></code>. If you want to know how constraint validation happens step by step in the browser check out this WhatWG doc.</p> <p>Thanks to HTML5's constraint validation feature, we can execute all <strong>standard input validation tasks</strong> on the client side <strong>without JavaScript, solely with HTML5</strong>.</p> <p>To perform more complex validation-related tasks, HTML5 provides us with a <strong>Constraint Validation JavaScript API</strong> we can use to set up our custom validation scripts.</p> <h4>Validate with Semantic Input Types</h4> <p>HTML5 has introduced <strong>semantic input types</strong> that — apart from indicating the meaning of the element for user agents — can also be used to <strong>validate user input</strong> by limiting users to a certain input format.</p> <p>Besides the input types that have already existed before HTML5 (<code>text</code>, <code>password</code>, <code>submit</code>, <code>reset</code>, <code>radio</code>, <code>checkbox</code>, <code>button</code>, <code>hidden</code>), we can also use the following <strong>semantic HTML5 input types</strong>: <code>email</code>, <code>tel</code>, <code>url</code>, <code>number</code>, <code>time</code>, <code>date</code>, <code>datetime</code>, <code>datetime-local</code>, <code>month</code>, <code>week</code>, <code>range</code>, <code>search</code>, <code>color</code>.</p> <p>We can safely use HTML5 input types with older browsers, as they will behave as an <code><input type=text></code> field in browsers that don't support them.</p> <p>Let's see what happens when the user enters the wrong input type. Say we have created an email input field with the following code:</p> <pre name=code> <form name=form action=# method=post> <label for=youremail>Your Email:</label> <input type=email name=email id=youremail> <input type=submit value=Submit> </form> </pre> <p>When the user types a string that doesn't use an email format, the constraint validation algorithm <strong>doesn't submit the form</strong>, and <strong>returns an error message</strong>:</p> <img src=//hideout-lastation.com/img/tech-design-tips/615/intro-into-html5-constraint-validation.jpg>The same rule applies to other input types as well, for example for <code>type="url"</code> users can only submit an input that follows the URL format (starts with a protocol, such as <code>http://</code> or <code>ftp://</code>).</p> <p>Some input types use a design that <strong>doesn't even allow users to enter a wrong input format</strong>, for example <code>color</code> and <code>range</code>.</p> <pre name=code> <form name=form action=# method=post> <label for=bgcol>Background Color:</label> <input type=color name=color id=bgcol> <input type=submit value=Submit> </form> </pre> <p>If we use the <code>color</code> input type the user is constrained to either choosing a color from the color picker or staying with the default black. The input field is <strong>constrained by design</strong>, therefore it doesn't leave much chance for user error.</p> <img src=//hideout-lastation.com/img/tech-design-tips/615/intro-into-html5-constraint-validation-2.jpg>When it's appropriate, it's worth considering using the <code><select></code> HTML tag which works similarly to these constrained-by-design input types; it lets users choose from a dropdown list.</p> <pre name=code> <form name=form action=# method=post> <label for=favfruit>Your Favourite Fruit:</label> <select name=fruit id=favfruit> <option value=apple>Apple</option> <option value=pear>Pear</option> <option value=orange>Orange</option> <option value=raspberry>Raspberry</option> </select> <input type=submit value=Submit> </form> </pre> <img src=//hideout-lastation.com/img/tech-design-tips/615/intro-into-html5-constraint-validation-3.jpg>Use HTML5's Validation Attributes</h4> <p>Using semantic input types sets certain constraints on what users are allowed to submit, but in many cases we want to go a little bit further. This is when the <strong>validation-related attributes</strong> of the <code><input></code> tag can help us out.</p> <p>Validation-related attributes belong to certain input types (they can't be used on <em>all</em> types) on which they impose further constraints.</p> <h5>1. <code>required</code> for getting a valid input by all means</h5> <p>The <code>required</code> attribute is the most well-known HTML validation attribute. It's a <strong>boolean attribute</strong> which means it <strong>doesn't take any value</strong>, we just simply have to place it inside the <code><input></code> tag if we want to use it:</p> <pre name=code> <input type=email name=email id=youremail required> </pre> <p>If the user forgets to enter a value into a required input field, the browser <strong>returns an error message</strong> that warns them to fill in the field, and they <strong>can't submit the form</strong> until they have provided a valid input. That's why it's important to always <strong>mark visually</strong> required fields to users.</p> <p>The <code>required</code> attribute can be <strong>used together with the following input types</strong>: <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>password</code>, <code>date</code>, <code>datetime</code>, <code>datetime-local</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>number</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, plus with the <code><textarea></code>and <code><select></code> HTML tags.</p> <h5>2. <code>min</code>, <code>max</code> and <code>step</code> for number validation</h5> <p>The <code>min</code>, <code>max</code> and <code>step</code> attributes enable us to <strong>put constraints on number input fields</strong>. They can be used together with the <code>range</code>, <code>number</code>, <code>date</code>, <code>month</code>, <code>week</code>, <code>datetime</code>, <code>datetime-local</code>, and <code>time</code> input types.</p> <p>The <code>min</code> and <code>max</code> attributes provide a great way to easily <strong>exclude unreasonable data</strong>. For instance the example below forces users to submit an age between 18 and 120.</p> <pre name=code> <form name=form action=# method=post> <label for=yourage>Your Age:</label> <input type=number name=age id=yourage min=18 max=120> <input type=submit value=Submit> </form> </pre> <p>When the constraint validation algorithm bumps into a user input smaller than the <code>min</code>, or larger than the <code>max</code> value, it prevents it from reaching the backend, and returns an error message.</p> <img src=//hideout-lastation.com/img/tech-design-tips/615/intro-into-html5-constraint-validation-4.jpg>The <code>step</code> attribute <strong>specifies a numeric interval</strong> between the legal values of a numeric input field. For instance, if we want users to choose only from leap years we can add the <code>step="4"</code> attribute to the field. In the example below I used the <code>number</code> input type, as there's no <code>type="year"</code> in HTML5.</p> <pre name=code> <form name=form action=# method=post> <label for=yourleapyear>Your Favourite Leap Year:</label> <input type=number name=leapyear id=yourleapyear min=1972 max=2016 step=4> <input type=submit value=Submit> </form> </pre> <p>With the pre-set constraints, users can only choose from leap years between 1972 and 2016 if they use the little up-arrow that comes with the <code>number</code> input type. They can also type a value manually into the input field, but in case it doesn't meet the constraints, the browser will return an error message.</p> <img src=//hideout-lastation.com/img/tech-design-tips/615/intro-into-html5-constraint-validation.gif>3. <code>maxlength</code> for text length validation</h5> <p>The <code>maxlength</code> attribute makes it possible to <strong>set a maximum character length</strong> for textual input fields. It can be used together with the <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code> and <code>password</code> input types, and with the <code><textarea></code> HTML tag.</p> <p>The <code>maxlength</code> attribute can be an excellent solution for phone number fields that cannot have more than a certain number of characters, or for contact forms where we don't want users to write more than a certain length.</p> <p>The code snippet below shows an example for the latter, it constraints user messages to 500 characters. </p> <pre name=code> <form name=form action=# method=post> <label for=yourmsg>Message (max 500 characters):</label> <textarea name=msg id=yourmsg cols=25 rows=4 maxlength=500>
L'attribut maxlength ne renvoie pas de message d'erreur, mais le navigateur ne laisse simplement pas les utilisateurs taper plus que le nombre de caractères spécifié. C'est pourquoi il est crucial d' informer les utilisateurs de la contrainte, sinon ils ne comprendront pas pourquoi ils ne peuvent pas continuer à taper.
4. pattern pour la validation Regex
L'attribut pattern nous permet d' utiliser des expressions régulières dans notre processus de validation d'entrée. Une expression régulière est un ensemble prédéfini de caractères 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 l'attribut pattern nous pouvons faire le dernier - contraindre les utilisateurs à soumettre leur entrée dans un format qui correspond à l'expression régulière donnée .
L'attribut pattern a de nombreux cas d'utilisation, mais il peut être particulièrement utile lorsque nous voulons valider un champ de mot de passe .
L'exemple ci-dessous exige que les utilisateurs saisissent un mot de passe d'au moins 8 caractères et contiennent au moins une lettre et un chiffre (source de l'expression rationnelle que j'ai utilisée).
Quelques autres choses
Dans cet article, nous avons examiné comment utiliser la validation de formulaire fournie par le navigateur fournie par l'algorithme de validation des contraintes natives de HTML5. Pour créer nos scripts de validation personnalisés, nous devons utiliser l'API de validation de contrainte qui peut être la prochaine étape dans l'affinement des compétences de validation de formulaire.
Les formulaires HTML5 sont accessibles par les technologies d'assistance. Nous ne devons donc pas nécessairement utiliser l'attribut ARIA aria-required l' aria-required pour marquer les champs de saisie requis pour les lecteurs d'écran. Cependant, il peut être utile d'ajouter un support d'accessibilité pour les anciens navigateurs. Il est également possible de désactiver la validation des contraintes en ajoutant l' novalidate booléen novalidate au
