Frage zum Wiki-Artikel „SVG_und_JavaScript“

[Rolf B]

Hallo Alexander,

für die Gültigkeitsprüfung KÖNNTEST Du das Pattern-Attribut des input-Elements nehmen:

<input id="plzInput" type="text" pattern="\d{5}">

Das Pattern ist eine Regex (regular expression), \d bedeutet "Ziffer" und {5} bedeutet "5 Stück davon". Das Pattern gibt Dir 2 Dinge:

• eine Pseudoklasse :valid im CSS, die Du zum Darstellen von "gut" und "schlecht" verwenden kannst. Das folgende Beispiel zeigt 4 Möglichkeiten, davon sollte man aber je Zustand nur eine verwenden 😉

#plzInput:valid {
   background-color: green;
   outline: 3px solid green;
}

#plzInput:not(:valid) {
   background-color: red;
   outline: 3px solid red;
}

• eine Methode checkValidity() auf dem HTMLInputElement Objekt in JavaScript, die true oder false liefert, je nachdem, ob das Pattern zutrifft. Du kannst also, statt "Eingabe enthält 5 Ziffern" zu programmieren, einfach das input Element fragen, ob sein Pattern korrekt eingehalten wurde.

Wenn du das mit jQuery tun willst, musst Du das input-Element aus dem Matched Set herausholen, d.h. so geht's nicht:

if ($("#plzInput").checkValidity()) ...

Hier gibt jemand einen Tipp für eine einfache selbstgemachte Erweiterung von jQuery zur Anbindung von checkValidity.

Oder Du tust es direkt:

if ($("#plzInput")[0].checkValidity()) ...

Oder noch direkter, ohne den ollen jQuery-Saurus:

if (document.getElementById("plzInput").checkValidity()) ...

Wenn Du das in einem Eventhandler für input oder change tust, kannst Du ohnehin event.target verwenden:

function HandleInputEvent(event) {
   if (event.target.checkValidity()) ...
}

Um den visuellen Hover-Effekt hinzubekommen, brauchst Du aber noch eigenes CSS. Denn Du kannst die :hover-Zustand nicht programmatisch herbeiführen. Alles, was Du kannst, ist eine Klasse wie bspw. highlight zu setzen und dann im CSS für polygon.highlight das gleiche zu tun wie für polygon:hover.

Mit dem Effekt, dass ggf. zwei Gebiete hervorgehoben werden. Es könnte nützlich sein, den :hover- und .hightlight-Effekt unterschiedlich darzustellen.

Rolf