nl.hideout-lastation.com
Intro in HTML5 Constraint Validation
Interactieve websites en applicaties kunnen niet worden voorgesteld zonder formulieren die ons in staat stellen verbinding te maken met onze gebruikers en om de gegevens te verkrijgen die we nodig hebben om soepele transacties met hen te beveiligen. We hebben wel geldige gebruikersinvoer nodig, maar we moeten deze op een manier verkrijgen die onze gebruikers niet te veel frustreert .
Hoewel we de bruikbaarheid van onze formulieren met slim gekozen UX-designpatronen kunnen verbeteren, heeft HTML5 ook een eigen mechanisme voor constraint-validatie waarmee we invoerfouten direct in de front-end kunnen vangen .
In deze post concentreren we ons op door browsers geleverde beperkingsvalidatie en onderzoeken we hoe frontend-ontwikkelaars geldige gebruikersinvoer kunnen beveiligen met HTML5 .
Waarom hebben we front-end invoervalidatie nodig?
Inputvalidatie heeft twee hoofddoelen. De inhoud die we krijgen, moet zijn:
1. Handig
We hebben bruikbare gegevens nodig waarmee we kunnen werken . We moeten ervoor zorgen dat mensen realistische gegevens invoeren in het juiste formaat . Niemand die nu nog leeft, is bijvoorbeeld 200 jaar geleden geboren. Dergelijke gegevens kunnen in het begin misschien grappig lijken, maar op de lange termijn is het vervelend en bevolkt onze database met nutteloze gegevens.
2. Veilig
Wanneer we het hebben over beveiliging, betekent dit dat we de injectie van kwaadaardige inhoud moeten voorkomen - hetzij opzettelijk of per ongeluk.
Het nut (het verkrijgen van redelijke gegevens) kan alleen aan de kant van de klant worden bereikt, het backend-team kan hier niet te veel mee helpen. Om beveiliging te bereiken, moeten ontwikkelaars van front- en back-end samenwerken .
Als ontwikkelaars van frontends de invoer aan de clientzijde naar behoren valideren, zal het backend-team met veel minder kwetsbaarheden te maken krijgen . Hacken (een site) omvat vaak het indienen van extra gegevens of gegevens in het verkeerde formaat . Ontwikkelaars kunnen beveiligingsgaten zoals deze bevechten, met succes vechten vanaf de voorkant.
Deze PHP-beveiligingsgids raadt bijvoorbeeld aan om alles wat we kunnen aan de kant van de klant te controleren. Ze benadrukken het belang van frontend invoervalidatie door veel voorbeelden te geven, zoals:
"Inputvalidatie werkt het beste met extreem beperkte waarden, bijvoorbeeld wanneer iets een geheel getal of een alfanumerieke tekenreeks of een HTTP-URL moet zijn."
Bij frontend invoervalidatie is het onze taak om redelijke beperkingen op te leggen aan gebruikersinput. De beperkingsvalidatiefunctie van HTML5 biedt ons de middelen om dit te doen.
HTML5 Constraint-validatie
Vóór HTML5 waren frontend-ontwikkelaars beperkt tot het valideren van gebruikersinvoer met JavaScript, wat een vervelend en foutgevoelig proces was. Om de validering van de clientzijde te verbeteren, heeft HTML5 een beperkingsvalidatiealgoritme geïntroduceerd dat in moderne browsers wordt uitgevoerd en controleert het de geldigheid van de ingezonden invoer .
Om de evaluatie te maken, gebruikt het algoritme de validatie-gerelateerde attributen van invoerelementen, zoals , </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>
Het maxlength retourneert geen foutbericht, maar de browser laat gebruikers gewoon niet meer typen dan het opgegeven maxlength . Daarom is het cruciaal om gebruikers te informeren over de beperking, anders begrijpen ze niet waarom ze niet kunnen doorgaan met typen.
4. pattern voor Regex-validatie
Het pattern stelt ons in staat om reguliere expressies te gebruiken in ons invoervalidatieproces. Een reguliere expressie is een vooraf gedefinieerde reeks tekens die een bepaald patroon vormen. We kunnen het gebruiken om te zoeken naar reeksen die het patroon volgen, of om een bepaald formaat af te dwingen dat door het patroon wordt gedefinieerd.
Met het pattern kunnen we dit doen - beperk gebruikers om hun invoer in te dienen in een formaat dat overeenkomt met de gegeven reguliere expressie .
Het pattern heeft veel gebruikscasussen, maar het kan vooral handig zijn als we een wachtwoordveld willen valideren .
In het onderstaande voorbeeld moeten gebruikers een wachtwoord invoeren dat minimaal 8 tekens lang is en minimaal één letter en één cijfer bevat (bron van de gebruikte regex).
Nog een paar dingen
In dit artikel hebben we gekeken hoe u gebruik kunt maken van de door de browser geleverde formuliervalidatie die wordt geleverd door HTML5's validatiealgoritme voor native constraint. Voor het maken van onze aangepaste validatiescripts, moeten we de Constraint Validation API gebruiken, wat een volgende stap kan zijn in het verfijnen van formuliervalidatievaardigheden.
HTML5-formulieren zijn toegankelijk via ondersteunende technologieën, dus we hoeven niet noodzakelijk het aria-required ARIA-kenmerk te gebruiken om vereiste invoervelden voor schermlezers te markeren. Het kan echter nog steeds nuttig zijn om toegankelijkheidsondersteuning toe te voegen voor oudere browsers. Het is ook mogelijk om de validatie van beperkingen uit te novalidate door het novalidate boolean-kenmerk toe te voegen aan de
