CSS, HTML und Javascript mit {stil}

Formulare mit Javascript validieren

Session Storage

Javascript prüft Formulare, um das lästige Hin- und Her zwischen der Anwendung auf dem Server und dem Browser zu ersparen.

  • Sind alle erforderlichen Felder ausgefüllt,
  • haben wir hier eine valide Emailadresse,
  • liegt ein Datum vor,
  • ist die Eingabe in diesem Feld eine Zahl?

Vorzugsweise werden die Felder eines Formulars direkt bei der Eingabe von einem Javascript geprüft.

  • onblur fängt die Eingabe bei input type="text" ab.
  • onchange fängt eine Änderung in select-Listen ab und erkennt das Ändern in textarea.
  • onsubmit fängt das Absenden des Formulars ab.
  • onclick fängt das Ändern bei input type="radio" und type="checkbox" ab (onchange funktioniert auch bei Checkboxen, war aber nicht zuverlässig bei IE6 / IE7).

Das Validieren mit Javascript erspart die Prüfungen durch die Anwendung auf dem Server nicht: Der Benutzer könnte Javascript deaktivert haben (auch wenn echte Benutzer Javascript nur noch selten ausschalten – für Hacker ist das Umgehen der Javascript-Validierung ein Klacks).

Absenden des Formulars verhindern

Um zu verhindern, dass der Browser die Formulardaten beim Klick auf den Submit-Button des Formulars direkt an den Server leitet, fängt das Script das Absenden der Eingaben mit einem EventListener ab auf dem onsubmit-Event ab.

HTML
<form id="myform" action="formhandler.php" method="post">
…
</form>
----------------------------------------------------------------------------
SCRIPT
var myform = document.getElementById('myform');
myform.addEventListener('submit',function (evt) {
   var error = false; 
…
   if (error) {
      evt.preventDefault();
   }
});

Für IE8 war die Funktion noch

elem.attachEvent ('onsubmit',formHandler);

preventDefault verhindert die vorgegebene Aktion des Browsers – das Übermitteln der Formulardaten an die Anwendung auf dem Server. Für IE8 und älter wird das Absenden des Formulars durch evt.returnValue = false unterdrückt.

Weil preventDefault das auslösende Event braucht, kann das Event immer als Parameter des Event Handlers (evt) eingesetzt werden.

onblur – Fehleingaben sofort abfangen

onblur erkennt Fehleingaben in dem Moment, in dem die Maus oder der Finger das Eingabefeld verlässt. Das klärt den Benutzer schneller über fehlende oder falsche Eingaben auf als Fehlermeldungen, die erst beim submit erscheinen.

input type="text": elem.value

Der Wert eines Eingabefelds kann direkt über das value-Attribut des input-Tags abgefragt werden.

HTML
<label>
   <span>Name</span>
   <input type="text" name="formname" value="" placeholder="Name (erforderlich)" required>
</label>
Script
var errorname = true;

var formname = document.getElementsByName('formname')[0];
formname.onfocus = function () {
    this.setAttribute('style','background: white');
}
formname.onblur = function () {
    if (this.value.match(regexName)) {
        this.setAttribute('style','background: white');
        document.querySelector('.msg.formname').innerHTML = '';
        document.querySelector('.msg.formname').setAttribute('style','display:none');
        errorname = false;
    } else {
        this.setAttribute('style','background:seashell');
        document.querySelector('.msg.formname').innerHTML = 'Bitte geben Sie ihren Namen ein!';
        document.querySelector('.msg.formname').setAttribute('style','display:block');
        errorname = true;
    }
}

Der reguläre Ausdruck regexName prüft die Zeichenketten vor der Übermittlung anhand einer Whitelist.

Eine Whitelist für Namen erlaubt z.B. Buchstaben von A bis Z und Umlaute bzw. Sonderzeichen der Sprache wie ä, ö, é. Dazu kommen Leerzeichen, Bindestriche, Punkte und Apostroph, damit auch È. D'Artagnan-Hörbrügger als Name anerkannt wird. Durch die Whitelist bleiben gefährliche Sonderzeichen wie <, >, % und : außen vor.

Namen          /^([ \u00c0-\u01ffa-zA-Z\.' \-]{3,})+$/;
Telefonnummern /^([0-9\.-\/ ()]{7,})$/;
Email          /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
URL            /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/

Formular-Eingaben testen mit Regulären Ausdrücken.

\u00c0-\u01ffa erlaubt die diakritischen Sonderzeichen wie Umlaute, Zirkumflex, Gravis und Tilde der Sprachen im Namen von Eingabefeldern.

Das wird der Anwendung auf dem Server natürlich die erneute Prüfung nicht ersparen, aber dem Benutzer u.U. das Hin- und Her zwischen Browser und Server.

Werte von select-Listen lesen

Bei Select-Listen ist der Rückgabewert nicht der Text des option-Tags, sondern der Wert des value-Attributs. Wenn kein value-Attribut im option-Tag eingetragen ist, liefert elem.value den Text zwischen öffnenden und schließenden option-Tags.

Die Javascript-Validierung interessiert aber im Grunde genommen nur dafür, ob der Benutzer ein Element ausgewählt hat oder das Feld ausgelassen hat.

HTML
<label><span>Buchtitel</span>
   <select name="fieldtitel">
      <option>–– Buchtitel wählen ––</option>
      <option value="n417">Eine Geschichte von fast allem</option>
      <option value="n418">Das Heideprinzesschen</option>
      <option value="n419">Lecture Notes on Physics</option>
   </select>
</label>
Script
var formtitel = document.getElementsByName('formtitel')[0];
formtitel.onchange = function () {
	if (formtitel.selectedIndex == 0) {
		this.setAttribute('style','background:seashell');
		document.querySelector('.msg.formtitel').innerHTML = 'Bitte wählen Sie den Buchtitel!';
		document.querySelector('.msg.formtitel').setAttribute('style','display:block');
		errortitel = true;
	} else {
		this.setAttribute('style','background: white');
		document.querySelector('.msg.formtitel').innerHTML = '';
		document.querySelector('.msg.formtitel').setAttribute('style','display:none');
		errortitel = false;
	}
}

Bleibt es beim Eintrag »Buchtitel wählen« auf dem Index 0, gibt es einen Hinweis und das error-Flag wird gesetzt.

Werte von radio-Gruppen

onchange feuert nicht, wenn ein Radio-Button aktiviert oder deaktiviert wird. Für jedes Eingabefeld einer Radio-Gruppe muss einzeln mit einem click-Event geprüft werden, ob es selektiert wurde.

Zusammengehörige radio-Buttons haben ein gemeinsames name-Attribut, über das Javascript alle input-Elemente einer Radio-Gruppe als Array anspricht.

HTML
   <input type="radio" name="fieldbooktype" value="Gebunden" /> Gebundene Ausgabe
   <input type="radio" name="fieldbooktype" value="Taschenbuch" /> Taschenbuch
   <input type="radio" name="fieldbooktype" value="eBook" checked /> eBook
Script
var fieldbooktype = document.querySelector('input[name="fieldbooktype"]:checked');

Checkboxen abfragen

Eingabefelder type="checkbox" bilden zwar genauso wie Radio-Buttons eine Gruppe, aber bei Checkboxen kann mehr als ein Feld aktiviert sein.

querySelectorAll ist eine riesige Erleichterung, denn dank querySelectorAll das Script holt mit einer Anweisung alle aktivierten Checkboxen in eine NodeList.

HTML
<input type="checkbox" name="fieldpack" value="box1"> Geschenkbox Blau
<input type="checkbox" name="fieldpack" value="box2"> Schleife
<input type="checkbox" name="fieldpack" value="box3"> Lesezeichen
Script
var fieldpack = document.querySelectorAll('input[name="fieldpack"]:checked');