no.hideout-lastation.com
Intro til HTML5-begrensnings validering
Interaktive nettsteder og applikasjoner kan ikke forestilles uten skjemaer som gjør at vi kan koble til brukerne våre, og for å få de dataene vi trenger for å sikre jevne transaksjoner med dem. Vi trenger gyldig brukerinngang, men vi må anskaffe den på en måte som ikke frustrer brukerne våre for mye.
Mens vi kan forbedre brukervennligheten av våre skjemaer med smarte utvalgte UX-designmønstre, har HTML5 også en innfødt mekanisme for begrensningsvalidering som tillater oss å få innspillingsfeil rett foran .
I dette innlegget vil vi fokusere på nettleservariant validering, og se på hvordan frontendutviklere kan sikre gyldig brukerinngang ved hjelp av HTML5 .
Hvorfor trenger vi inngangs validering på forhånd
Input validering har to hovedmål. Innholdet vi får må være:
1. Nyttig
Vi trenger brukbare data vi kan jobbe med . Vi må gjøre folk inn i realistiske data i riktig format . For eksempel er ingen som lever i dag født for 200 år siden. Å få data som dette kan virke morsomt først, men på lang sikt er det irriterende og fyller databasen med ubrukelige data.
2. Sikre
Når det gjelder sikkerhet, betyr dette at vi må forhindre injeksjon av skadelig innhold - enten bevisst eller ved et uhell.
Nyttenhet (å få fornuftige data) kan bare oppnås på klientsiden, backend-teamet kan ikke hjelpe for mye med dette. For å oppnå sikkerhet, må utviklere av front- og backend samarbeide .
Hvis frontendutviklere på riktig måte validerer innspill på klientsiden, må backend-teamet håndtere mye mindre sårbarheter . Hacking (et nettsted) innebærer ofte å sende inn ekstra data, eller data i feil format . Utviklere kan bekjempe sikkerhetshull som disse, lykkes med å kjempe fra fronten.
For eksempel anbefaler denne PHP-sikkerhetsguiden å sjekke alt vi kan på klientsiden. De legger vekt på viktigheten av inngangsvalidering av frontend ved å gi mange eksempler, for eksempel:
"Input validering fungerer best med ekstremt begrensede verdier, for eksempel når noe må være et heltall, eller en alfanumerisk streng eller en HTTP-URL."
I frontend-inngangsvalidering er vår jobb å pålegge rimelige begrensninger på brukerinngang. HTML5s begrensningsvalideringsfunksjon gir oss muligheten til å gjøre det.
HTML5-begrensnings validering
Før HTML5 ble frontend-utviklere begrenset til å validere brukerinngang med JavaScript, noe som var en kjedelig og feilaktig prosess. For å forbedre validering av klientsiden, har HTML5 introdusert en begrensningsvalideringsalgoritme som kjører i moderne nettlesere, og kontrollerer gyldigheten av den innsendte innsatsen .
For å gjøre evalueringen bruker algoritmen valideringsrelaterte attributter til inngangselementer, for eksempel , </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>
maxlength attributtet returnerer ikke en feilmelding, men nettleseren lar ikke brukerne skrive mer enn det angitte maxlength . Derfor er det viktig å informere brukerne om begrensningen, ellers forstår de ikke hvorfor de ikke kan fortsette med å skrive.
4. pattern for Regex validering
Mønsterattributtet gir oss mulighet til å bruke vanlige uttrykk i vår innskrivningsvalideringsprosess. Et vanlig uttrykk er et forhåndsdefinert sett med tegn som danner et bestemt mønster. Vi kan bruke den til å søke etter strenger som følger mønsteret, eller for å håndheve et bestemt format definert av mønsteret.
Med pattern kan vi gjøre sistnevnte - begrense brukere til å sende inn innspill i et format som samsvarer med det gjeldende regulære uttrykket .
Mønsterattributtet har mange brukstilfeller, men det kan være spesielt nyttig når vi vil validere et passordfelt .
Eksempelet nedenfor krever at brukerne oppgir et passord som er minst 8 tegn langt, og inneholder minst ett bokstav og ett nummer (kilde til regex jeg brukte).
Noen flere ting
I denne artikkelen tok vi en titt på hvordan å bruke skjemavalideringen som ble levert av nettleseren, gitt av HTML5s nasjonale begrensningsvalideringsalgoritme. For å skape våre tilpassede valideringsskript, må vi bruke Begrensningsvaliderings-API som kan være det neste trinnet i raffinering av formularvalideringsferdigheter.
HTML5-skjemaer er tilgjengelige med hjelpeteknologi, så vi trenger ikke nødvendigvis å bruke aria-required ARIA-attributt for å markere nødvendige innskrivningsfelter for skjermlesere. Men det kan fortsatt være nyttig å legge til tilgjengelighetsstøtte for eldre nettlesere. Det er også mulig å velge bort begrensningsvalidering ved å legge til den novalidate boolske attributten til
