Doch nicht erledigt

[Matthias Apsel]

Hallo Jnnbo,

aus dem fiddle:

<input type="text" name="firma" id="tags" placeholder="Firmennamen:" pattern="^.{2,}$" required>

type=text ist default, könnte weg

placeholder sollte ein Beispiel enthalten, nicht eine Wiederholung des labels sein. Ausnahmen bestätigen die Regel.

pattern:

^

der Anfang der Zeichenkette

.

genau ein beliebiges Zeichen

{2,}

mindestens 2 davon (im OP „mehr als ein Zeichen“)

$

das Ende der Zeichenkette

Wird dies erfüllt, so ist die Eingabe gültig.

required ist notwendig, damit überhaupt auf Gültigkeit geprüft wird

<input type="submit" name="abschicken" id="abschicken" value="Filtern" class="ok">

besser:

<button name="abschicken" id="abschicken" class="ok">Filtern</button>

Fraglich ist auch, ob name und id benötigt werden.

Du kannst jetzt überlegen: Möchtest du das Formular auch abschicken, wenn im Inputfeld weniger als 2 Zeichen stehen dann füge das Attribut formnovalidate hinzu.

Wenn das gezeigte Formular tatsächlich das komplette Formular ist, spricht imho nichts dagegen. Handelt es sich um ein umfangreiches Formular, wird kein Element mehr auf Gültigkeit geprüft. Die visuelle Hervorhebung erhältst du trotzdem.

Wenn die Eingabe gültig ist, soll das Element #kunden ausgeblendet werden.

#tags:valid + #kunden { display: none; }
  /* Es gibt verträglichere Ausblendungsmethoden */
  /* In diesem Fall könnte es aber tatsächlich, auch für Screenreader, komplett weg */

Bis demnächst
Matthias