de.hideout-lastation.com
Einführung in HTML5 Constraint-Validierung
Interaktive Websites und Anwendungen sind ohne Formulare nicht denkbar, die es uns ermöglichen, mit unseren Nutzern in Kontakt zu treten und die Daten zu erhalten, die wir benötigen, um reibungslose Transaktionen mit ihnen zu gewährleisten. Wir brauchen eine gültige Benutzereingabe, aber wir müssen sie auf eine Art und Weise erwerben, die unsere Benutzer nicht zu sehr frustriert .
Während wir die Benutzerfreundlichkeit unserer Formulare mit intelligent ausgewählten UX-Entwurfsmustern verbessern können, verfügt HTML5 auch über einen nativen Mechanismus zur Überprüfung von Einschränkungen, mit dem wir Eingabefehler direkt im Frontend abfangen können .
In diesem Beitrag konzentrieren wir uns auf die Überprüfung von Constraints durch Browser und untersuchen, wie Front-End-Entwickler gültige Benutzereingaben mithilfe von HTML5 sicherstellen können.
Warum wir eine Validierung des Front-End-Inputs benötigen
Die Validierung von Eingaben hat zwei Hauptziele. Der Inhalt, den wir bekommen, muss sein:
1. Nützlich
Wir brauchen brauchbare Daten, mit denen wir arbeiten können . Wir müssen Menschen dazu bringen, realistische Daten im richtigen Format einzugeben. Zum Beispiel wurde niemand, der heute lebt, vor 200 Jahren geboren. Daten wie diese zu bekommen mag auf den ersten Blick komisch erscheinen, aber auf lange Sicht ist es ärgerlich und füllt unsere Datenbank mit nutzlosen Daten.
2. Sicher
In Bezug auf Sicherheit bedeutet dies, dass wir verhindern müssen, dass schädliche Inhalte injiziert werden - sei es absichtlich oder versehentlich.
Nützlichkeit (vernünftige Daten erhalten) kann nur auf der Client-Seite erreicht werden, das Backend-Team kann nicht viel damit zu tun haben. Um Sicherheit zu erreichen, müssen Front- und Backend-Entwickler zusammenarbeiten .
Wenn Frontend-Entwickler Eingaben auf der Client-Seite korrekt validieren, muss das Backend-Team mit weitaus weniger Sicherheitslücken umgehen . Hacking (eine Website) erfordert häufig die Übermittlung zusätzlicher Daten oder Daten im falschen Format . Entwickler können Sicherheitslücken wie diese bekämpfen und erfolgreich von der Front aus kämpfen.
Zum Beispiel empfiehlt dieser PHP-Sicherheitsleitfaden, alles, was wir auf der Client-Seite können, zu überprüfen. Sie betonen die Wichtigkeit der Validierung von Frontend-Eingaben, indem sie viele Beispiele geben, wie zum Beispiel:
"Die Eingabevalidierung funktioniert am besten mit extrem eingeschränkten Werten, z. B. wenn etwas eine Ganzzahl oder eine alphanumerische Zeichenfolge oder eine HTTP-URL sein muss."
Bei der Validierung von Frontend-Eingaben besteht unsere Aufgabe darin , Benutzereingaben angemessen zu beschränken . Die Einschränkungsprüfungsfunktion von HTML5 bietet uns die Möglichkeit, dies zu tun.
HTML5 Constraint-Validierung
Vor HTML5 beschränkten sich die Frontend-Entwickler darauf, Benutzereingaben mit JavaScript zu validieren, was ein langwieriger und fehleranfälliger Prozess war. Um die clientseitige Formularvalidierung zu verbessern, hat HTML5 einen Constraint-Validierungsalgorithmus eingeführt, der in modernen Browsern ausgeführt wird und die Gültigkeit der übermittelten Eingabe überprüft .
Zur Durchführung der Auswertung verwendet der Algorithmus die validierungsbezogenen Attribute von Eingabeelementen, wie z , </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>
Das maxlength -Attribut gibt keine Fehlermeldung zurück, aber der Browser lässt Benutzer einfach nicht mehr als die angegebene maxlength . Deshalb ist es wichtig, die Benutzer über die Einschränkung zu informieren, sonst werden sie nicht verstehen, warum sie nicht mit der Eingabe fortfahren können.
4. pattern für die Regex-Validierung
Das pattern ermöglicht es uns, reguläre Ausdrücke in unserem Eingabe-Validierungsprozess zu verwenden. Ein regulärer Ausdruck ist eine vordefinierte Menge von Zeichen, die ein bestimmtes Muster bilden. Wir können es verwenden, um Zeichenketten zu suchen, die dem Muster folgen, oder um ein bestimmtes, durch das Muster definiertes Format zu erzwingen.
Mit dem pattern können wir letzteres tun - Benutzer dazu zwingen, ihre Eingaben in einem Format zu senden, das dem gegebenen regulären Ausdruck entspricht .
Das pattern hat viele Anwendungsfälle, aber es kann besonders nützlich sein, wenn wir ein Passwortfeld validieren wollen.
Im folgenden Beispiel müssen Benutzer ein Kennwort eingeben, das mindestens 8 Zeichen lang ist und mindestens einen Buchstaben und eine Zahl enthält (Quelle der von mir verwendeten Regex).
Ein paar mehr Dinge
In diesem Artikel haben wir untersucht, wie Sie die vom HTML5-Algorithmus zur Überprüfung der nativen Integritätsbedingungen zur Verfügung gestellte Formularvalidierung nutzen können . Zum Erstellen unserer benutzerdefinierten Validierungsskripts müssen wir die Constraint-Validierungs-API verwenden, die den nächsten Schritt zur Verbesserung der Fähigkeiten zur Formularvalidierung darstellen kann.
Auf HTML5-Formulare kann mit assistiven Technologien zugegriffen werden. Daher müssen wir nicht unbedingt aria-required ARIA-Attribut aria-required, um die erforderlichen Eingabefelder für Bildschirmleseprogramme zu markieren. Es kann jedoch immer noch nützlich sein, die Barrierefreiheit für ältere Browser hinzuzufügen. Es ist auch möglich, die Constraint-Validierung zu deaktivieren, indem Sie dem booleschen Attribut novalidate Attribut novalidate hinzufügen
