Mitgliederversammlung 2018


Die diesjährige Mitgliederversammlung des Vereins SELFHTML e.V. findet am 8.9.2018 um 10:00 Uhr in Dortmund statt.

Die Adresse des Tagungsortes sowie die geplante Tagesordnung entnehmt ihr bitte der Seite https://forum.selfhtml.org/events/3.

Interessierte Gäste sind gern gesehen.

HTML/Tutorials/Formulare/browsereigene Validierung mit HTML5

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Es ist sinnvoll HTML-basierte Formulare nicht erst serverseitig, sondern zusätzlich schon vor dem Absenden clientseitig auf Validität zu überprüfen. HTML5 bietet einige Möglichkeiten, Eingaben von input-Elementen bereits während der Eingabe zu validieren. Auch wenn diese Validierungen eine spätere serverseitige Überprüfung nicht ersetzen, werden falsche Eingaben sofort durch CSS sichtbar gemacht und können ohne weitere HTTP-Requests korrigiert werden. Die Pseudoklassen :valid für gültige und :invalid für falsche Eingaben selektieren Formularelemente auf die Gültigkeit einer Eingabe hin. Das Ergebnis kann mit den Möglichkeiten von CSS entsprechend angezeigt werden.

Beachten Sie: Eine clientseitige Validierung von Formulardaten kann eine serverseitige Validierung keinesfalls ersetzen, sondern nur den Bedienkomfort eines Nutzers erhöhen, indem das Absenden ungeeigneter Daten im Vorfeld zu vermeiden versucht wird. Diese Filterung kann jedoch umgangen werden, weshalb man sich auf der Serverseite niemals auf solche Prüfmechanismen verlassen darf.

Eingabemuster mit pattern[Bearbeiten]

Mit dem pattern-Attribut können Sie die Eingaben von input-Elemente gegen einen regulären Ausdruck hin überprüfen, ob die Eingabe den Erwartungen entspricht. Für die Eingabe von Zahlen, Telefonnummern und E-Mail-Adressen gibt es bereits eigene Typen, sodass Sie keine weiteren Einstellungen vornehmen müssen.

  • HTML5
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari

Details: caniuse.com

Beispiel: Eingabemuster mit pattern ansehen …
  <label for="bname">Benutzername</label>
  <input id="bname" required>
 
  <label for="passwd">Passwort</label>
  <input id="passwd" type="password" required pattern="67kgYx@3rt" 
         title="Das Passwort lautet: &quot;67kgYx@3rt&quot;ohne Anführungszeichen.">
 
  <label for="text">Leerzeichen verboten</label>
  <input id="text" pattern="^\S*$">
Es muss ein Benutzername angegeben werden.

Das Passwort wird vor dem Absenden des Formulars Korrektheit überprüft (pattern = …).

Die Eingabe des letzten Feldes darf kein Leerzeichen enthalten.

Ober- und Untergrenzen[Bearbeiten]

Mit den Attributen min, max und maxlength können Sie Ober- und Untergrenzen festlegen.

Beispiel ansehen …
input {
    border: 1px solid black;
}
input:in-range {
    background-color: rgba(0, 255, 0, 0.25);
}
input:out-of-range {
    background-color: rgba(255, 0, 0, 0.25);
    border: 2px solid red;
}
input:in-range + ::after {
    content:' ✔';
}
input:out-of-range + ::after {
    content:' außerhalb des Bereichs!';
}
<form action="" id="form1">
  <label for="alter">Ihr Alter ist: </label>
  <input id="alter" name="altersangabe" type="number" placeholder="6 bis 99" min="6" max="99">
  <span></span>
</form>
Im vorliegenden Beispiel ändert sich die Hintergrundfarbe des Eingabefelds von grün auf rot, sobald etwas außerhalb des Gültigkeitsbereichs eingegeben wurde. Die Hintergrundfarbe ist in den Pseudoklassen :in-range und :out-of-range festgelegt. Sobald der eingegebene Wert wieder im Gültigkeitsbereich der Bereichsbegrenzung liegt, wird der Hintergrund wieder grün.


Pflichtfelder[Bearbeiten]

Pflichtfelder erhalten das required-Attribut (engl. für erforderlich). Solange die Eingaben nicht valide sind, wird ein Absenden des Formulars verhindert und eine Fehlermeldung ausgegeben.

  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari

Details: caniuse.com

Beispiel: Pflichtangaben ansehen …
<form> <label for="bname">Benutzername</label> <input id="bname" required> <label for="passwd">Passwort</label> <input type="password" id="passwd" required> <input type="submit" value="anmelden"> </form>
Beachten Sie: Safari zeigt zwar die entsprechende Fehlermeldung an, schickt das Formular aber trotzdem ab.


Screenshot von Fehlermeldungen bei Pflichtangaben

Beachten Sie: Diese Meldungen sind sehr allgemein gehalten und können unter ungünstigen Umständen in der im Browser eingestellten, und nicht in der in der Webseite verwendeten Sprache sein.
Es könnte empfehlenswert sein, die browsereigene Gültigkeitsüberprüfung abzuschalten und durch eigene JavaScripte zu ersetzen.

Anwendungsbeispiel[Bearbeiten]

Validierung der Eingabe[Bearbeiten]

Es ist sinnvoll, Pflichtfelder zu kennzeichnen. Häufig geschieht das durch einen Asterisk *. In diesem Beispiel ändert sich die Kennzeichnung zu einem Haken ✔, sobald die Eingabe valide ist. Durch Verwendung der Pseudoklassen :valid, :invalid können Sie die Eingabe überprüfen:

Beispiel ansehen …
form {
  width: 30em;
  padding-top: 3em;
  position: relative;
}
input {
  margin: 0 0 1em 31%;
  padding: .2em .5em;
  width: 60%;
  background-color: #fffbf0; 
  border: 1px solid #e7c157;  
}
label { 
  text-align: right;
  line-height: 1.5;
  width: 30%;
  position: absolute;
  left: 0;
}
label::after {
  content: ": ";
}
button {
  margin-left: 31%;
}
input:required + label::before {
  position: absolute;
  left: 300%;
  content: "★";
  color: red;
}
input:required:valid + label::before {
  content: "✔";
  color: green;
}
    <form>
         <input id="bname" required><label for="bname">Benutzername</label>
         <input id="passwd" type="password" required><label for="passwd">Passwort</label>      
         <button type="submit">anmelden</button>
    </form>
Die Kennzeichnung ( bzw. ) erfolgt durch ::before-Pseudoelemente der label-Elemente, die ::after-Pseudoelemente stellen wie in den anderen Beispielen dieser Seite auch bereits die abschließenden Doppelpunkte dar.

Die Reihenfolge im Markup ist ungewöhnlich, aber notwendig:

  • input darf als replaced element keinen, auch keinen generierten Inhalt erhalten,
  • CSS kann nur vorwärts selektieren