Div ausblenden wenn in "input type="text" etwas steht

[Jnnbo]

Hallo,

um Fehler zu vermeiden möchte ich gerne folgendes erreichen. Wenn ich im Feld Firme

<input type="text" name="firma" id="firma" placeholder="Firmennamen:">

mehr als ein Zeichen schreibe, dann soll das Div

<div class="optionen"></div

ausgeblendet werden. Wird es wieder weniger als ein Zeichen z.B. wenn ich etwas lösche, dann soll es wieder eingeblendet werden. Habt ihr eine Idee, wie ich das umsetzten könnte vielleicht auch ein Stichwort nach was ich bei Google suchen könnte?

[Matthias Apsel]

Hallo Jnnbo,

um Fehler zu vermeiden möchte ich gerne folgendes erreichen. Wenn ich im Feld Firme

<input type="text" name="firma" id="firma" placeholder="Firmennamen:">

mehr als ein Zeichen schreibe, dann soll das Div

<div class="optionen"></div

ausgeblendet werden. Wird es wieder weniger als ein Zeichen z.B. wenn ich etwas lösche, dann soll es wieder eingeblendet werden. Habt ihr eine Idee, wie ich das umsetzten könnte vielleicht auch ein Stichwort nach was ich bei Google suchen könnte?

In Abhängigkeit von deiner HTML-Struktur und davon, welche Browser du unterstützen möchtest, ist dies mit reinem CSS umsetzbar.

• Pseudoklasse valid
• Attribut novalidate

Bis demnächst
Matthias

[Jnnbo]

Hallo Matthias,

In Abhängigkeit von deiner HTML-Struktur und davon, welche Browser du unterstützen möchtest, ist dies mit reinem CSS umsetzbar.

• Pseudoklasse valid
• Attribut novalidate

habe ich mir angesehen, das bezieht sich aber auf die Textfelder, ich muss wenn ein Wert vorhanden ist, ein DIV komplett ausblenden.

Ich dachte eher an so etwas

      $(':input').click(function(){
           $('.kunden_optionen').css("display", "none"); //.test ist die class des textfeldes
     });

Funktioniert auch, nur ich bekomme es nicht mehr eingeblendet, wenn man das Feld wieder verlässt.

[Matthias Apsel]

Hallo Jnnbo,

In Abhängigkeit von deiner HTML-Struktur und davon, welche Browser du unterstützen möchtest, ist dies mit reinem CSS umsetzbar.

• Pseudoklasse valid
• Attribut novalidate

habe ich mir angesehen, das bezieht sich aber auf die Textfelder, ich muss wenn ein Wert vorhanden ist, ein DIV komplett ausblenden.

Du kannst über ein pattern festlegen, was gültig sein soll und was nicht. Darauf kannst du, wenn es das HTML erlaubt, mit CSS reagieren, etwa

#myinput:invalid + .optionen { display: none; }

Bis demnächst
Matthias

[Jnnbo]

Hallo Matthias,

Du kannst über ein pattern festlegen, was gültig sein soll und was nicht. Darauf kannst du, wenn es das HTML erlaubt, mit CSS reagieren, etwa

#myinput:invalid + .optionen { display: none; }

mit CSS geht das leider alles nicht. Ich muss es mit Javascript machen.

[Gunnar Bittersmann]

@@Jnnbo

mit CSS geht das leider alles nicht. Ich muss es mit Javascript machen.

Für Mitleser und fürs Archiv:

Blödsinn. Wenn Matthias nicht nur sagt, dass es mit HTML und CSS geht, sondern sogar zeigt, wie es mit HTML und CSS geht, dann geht das mit HTML und CSS ohne JavaScript.

LLAP 🖖

[Jnnbo]

Hallo Gunnar,

Blödsinn. Wenn Matthias nicht nur sagt, dass es mit HTML und CSS geht, sondern sogar zeigt, wie es mit HTML und CSS geht, dann geht das mit HTML und CSS ohne JavaScript.

ganz ehrlich ich verstehe NICHT wie man hier ein +1 vergeben kann, denn wie Christian es richtig geschrieben hat, es ist NICHT möglich allein mit CSS und HTML dieses umzusetzten.

[Gunnar Bittersmann]

@@Jnnbo

Blödsinn. Wenn Matthias nicht nur sagt, dass es mit HTML und CSS geht, sondern sogar zeigt, wie es mit HTML und CSS geht, dann geht das mit HTML und CSS ohne JavaScript.

ganz ehrlich ich verstehe NICHT wie man hier ein +1 vergeben kann, denn wie Christian es richtig geschrieben hat, es ist NICHT möglich allein mit CSS und HTML dieses umzusetzten.

1. Wie Christian es richtig geschrieben hat, es ist NICHT möglich zu wissen, was du überhaupt willst.

2. Die Beurteilung, was allein mit CSS und HTML möglich ist umzusetzten, überlass bitte denen, die was davon verstehen.

LLAP 🖖

[Jnnbo]

Hallo,

hab es so umgesetzt und es funktioniert in allen Browsern

<input type="text" name="firma" id="firma" placeholder="Firmennamen:" onclick="document.getElementById('optionen').style.display = 'none'" onBlur="document.getElementById('optionen').style.display = 'block'">

[Jnnbo]

Hallo Jnnbo,

hab es so umgesetzt und es funktioniert in allen Browsern

<input type="text" name="firma" id="firma" placeholder="Firmennamen:" onclick="document.getElementById('optionen').style.display = 'none'" onBlur="document.getElementById('optionen').style.display = 'block'">

leider habe ich doch noch ein Problem, das DIV lässt sich zwar wunderbar ausblenden wenn ich in das Textfeld klicke, nur wenn ich dann auf den Button "senden" klicke, ist das DIV sofort wieder da und ich kann irgendwie nicht auf mein Button klicken bzw. dieser reagiert nicht darauf, liegt bestimmt an "onBlur" aber dieses benötige ich, um das DIV wieder einzublenden.

Die Lösung mit CSS, die mir Matthias vorgeschlagen hat, funktionier bei mir leider nicht, oder ich verstehe nicht, was er mit dem +optionen meint.

Wenn ich ihr auch kein Freund von Youtube seid, ich habe hier ein Video dazu gefunden in dem wird behauptet, auf :valid kann nur innerhalb vom Texfeld reagiert werden und es ist nicht möglich andere Aktionen danach auszuführen.

[Matthias Apsel]

Hallo Jnnbo,

Die Lösung mit CSS, die mir Matthias vorgeschlagen hat, funktionier bei mir leider nicht, oder ich verstehe nicht, was er mit dem +optionen meint.

Die vorgeschlagene Lösung kann nur Funktionieren, wenn das auszublendende Element in Abhängigkeit vom input-Element selektierbar ist. Dazu muss es in irgendeiner Form Nachfahre oder Geschwister-Element sein, da CSS (noch) nicht rückwärts selektieren kann.

+ bezeichnet den Nachbarselektor

Zeige das betreffende HTML und wir können schauen, ob eine CSS-Lösung jetzt schon oder mit kleinen Änderungen am HTML möglich ist.

Bis demnächst
Matthias

[Jnnbo]

Hallo Matthias,

Zeige das betreffende HTML und wir können schauen, ob eine CSS-Lösung jetzt schon oder mit kleinen Änderungen am HTML möglich ist.

mein komplettes HTML für diesen Bereich sieht so aus

<div class="suche">
<form name="form1" method="post" action="">
  <input type="text" name="firma" id="tags" placeholder="Firmennamen:">
</div>

<div class="optionen">
  <p id="kunden">
    <input type="checkbox" name="gesperrt" id="gesperrt" value="1">
    <label for="gesperrt">gesperrte Kunden einblenden</label>
  </p>
  <input type="submit" name="abschicken" id="abschicken" value="Filtern" class="ok">
</form>
</div>

Wenn ich in das Feld "firma" klicke und anfange schreibe, soll das "kunden" ausgeblendet werden. Wenn ich wieder rausklicke und oder den Eintrag lösche, soll es wieder eingeblendet werden.

[Matthias Apsel]

Hallo Jnnbo,

mein komplettes HTML für diesen Bereich sieht so aus

<div class="suche">
<form name="form1" method="post" action="">
  <input type="text" name="firma" id="tags" placeholder="Firmennamen:">
</div>

<div class="optionen">
  <p id="kunden">
    <input type="checkbox" name="gesperrt" id="gesperrt" value="1">
    <label for="gesperrt">gesperrte Kunden einblenden</label>
  </p>
  <input type="submit" name="abschicken" id="abschicken" value="Filtern" class="ok">
</form>
</div>

Das ist schon mal kaputt.

Suche enthält ein form, das nicht geschlossen ist. Oder ist einfach nur das schließende </div> zu viel?

Bis demnächst
Matthias

[Jnnbo]

Hallo Matthias,

Suche enthält ein form, das nicht geschlossen ist. Oder ist einfach nur das schließende </div> zu viel?

das <form> wird doch in der vorletzten Zeile geschlossen.

[Matthias Apsel]

Hallo Jnnbo,

<div>
  <form>
    <input>
</div>

ist ungültiges HTML. Du schhließt ein div-Element, welches noch offene Elemente enthält. Oder wie der Validator sagt: ‚Error: End tag div seen, but there were open elements.‘, ‚Error: Unclosed element form.‘

Ein leeres action-Attribut ist übrigens auch nicht erlaubt. Wenn du auf dieselbe Ressource zeigen möchtest, lass das action-Attribut weg.

Bis demnächst
Matthias

[Jnnbo]

Hallo Matthias,

Ein leeres action-Attribut ist übrigens auch nicht erlaubt. Wenn du auf dieselbe Ressource zeigen möchtest, lass das action-Attribut weg.

hab nun mein HTML überarbeitet, nach dem Validatorist es nun valid

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<div class="suche">
  <form name="form1" method="post">
    <input type="text" name="firma" id="tags" placeholder="Firmennamen:">
    <p id="kunden">
      <input type="checkbox" name="gesperrt" id="gesperrt" value="1" >
      <label for="gesperrt" style="width:31em;">gesperrte Kunden einblenden</label>
    </p>
    <input type="submit" name="abschicken" id="abschicken" value="Filtern" class="ok">
  </form>
</div>
</body>
</html>

das CSS müsste dann so aussehen, wenn ich dich richtig verstanden habe?

#tags:invalid + #kunden {
display: block;
}

Wenn ich jetzt anfange zu schreiben, wird leider immer noch nichts ausgeblendet.

EDIT:

Auch das geht nicht

#tags:invalid + p {
display: inline-block;
}

• p ist doch der Nachfolger von

<input type="text" name="firma" id="tags" placeholder="Firmennamen:">

So habe ich es hier zumindest verstanden

[Gunnar Bittersmann]

@@Jnnbo

Wenn ich jetzt anfange zu schreiben, wird leider immer noch nichts ausgeblendet.

Nochmal lesen, auch wenn Lesen nicht deine Stärke ist.

LLAP 🖖

[Jnnbo]

Hallo Gunnar,

Nochmal lesen, auch wenn Lesen nicht deine Stärke ist.

ich habe es GELESEN! Da steht nur was erlaubt sein soll und was nicht. Ich möchte ALLES erlauben. Das <p> soll SOFORT verschwinden wenn ich anfange schreibe EGAL was! Das habe ich nun mehrmals bereits geschrieben.

[Christian Kruse]

Hallo Jnnbo,

http://jsfiddle.net/rgzqg6bf/

LG,
CK

[Jnnbo]

Hallo Christian,

http://jsfiddle.net/rgzqg6bf/

danke für den Code, ich hatte das required auch schon drin, aber dann ist das ein Pflichtfeld und somit muss ich etwas eintragen, was ich aber nicht gebrauchen kann. Das Feld "kunden" soll sofort ausgeblendet werden wenn ich anfange schreibe, aber ich muss weiterhin die Möglichkeit habe, es natürlich auch leer abschicken zu können.

[Christian Kruse]

Hallo Jnnbo,

http://jsfiddle.net/rgzqg6bf/

danke für den Code, ich hatte das required auch schon drin, aber dann ist das ein Pflichtfeld und somit muss ich etwas eintragen, was ich aber nicht gebrauchen kann. Das Feld "kunden" soll sofort ausgeblendet werden wenn ich anfange schreibe, aber ich muss weiterhin die Möglichkeit habe, es natürlich auch leer abschicken zu können.

In dem Fall geht das nicht (es gibt keinen CSS-Selektor, der einen computed value matcht) und du musst JS nutzen.

LG,
CK

[Gunnar Bittersmann]

@@Christian Kruse

In dem Fall geht das nicht […] und du musst JS nutzen.

Unsinn. Du magst wohl auch keine Katzen?

Natürlich geht das ohne JavaScript. Eingabefelder bekommen entsprechende Attribute zur Eingabevalidierung. Mit CSS kann man darauf reagieren.

form-Element bekommt novalidate-Attribut, dadurch wird das Formular auch bei invaliden Eingaben abgeschickt.

LLAP 🖖

[Christian Kruse]

Hallo Gunnar,

Unsinn. Du magst wohl auch keine Katzen?

Wer mag schon Katzen?

form-Element bekommt novalidate-Attribut, dadurch wird das Formular auch bei invaliden Eingaben abgeschickt.

Das hat verdammt viele Nebenwirkungen, das würde ich so nie empfehlen und schon gar nicht, wenn ich nicht sicher sein kann, dass derjenige, der es anwendet versteht, was das tut.

LG,
CK

[Gunnar Bittersmann]

@@Christian Kruse

Wer mag schon Katzen?

Ich nicht. 🙀

form-Element bekommt novalidate-Attribut, dadurch wird das Formular auch bei invaliden Eingaben abgeschickt.

Das hat verdammt viele Nebenwirkungen, das würde ich so nie empfehlen

Nun ja, wenn man will, dass Eingabefelder validiert werden, das Formular als Ganzes aber nicht, dann ist das genau das, was das HTML ausdrückt.

und schon gar nicht, wenn ich nicht sicher sein kann, dass derjenige, der es anwendet versteht, was das tut.

Was willst du Jnnbo dann überhaupt empfehlen? SCNR.

LLAP 🖖

[Gunnar Bittersmann]

@@Christian Kruse

Hallo Jnnbo,

http://jsfiddle.net/rgzqg6bf/

Schlechtes Beispiel: Das Eingabefeld hat keine Beschriftung. :-(

Außerdem: input für Button. :-(

LLAP 🖖

[Christian Kruse]

Hallo Gunnar,

http://jsfiddle.net/rgzqg6bf/

Schlechtes Beispiel: Das Eingabefeld hat keine Beschriftung. :-(

Außerdem: input für Button. :-(

Kein Beispiel. Der Code aus dem OP. Augen auf! ;-)

LG,
CK

[Gunnar Bittersmann]

@@Christian Kruse

Kein Beispiel. Der Code aus dem OP. Augen auf! ;-)

Das kann gar nicht sein. Ich habe Jnnbo schon mehrmals gesagt, dass Eingabefelder unbedingt Beschriftungen (d.h. label) brauchen und dass placeholder keine Beschriftungen sind.

Das hätte der doch längst korrigiert!!1

LLAP 🖖

[Jnnbo]

Hallo Gunnar,

Das hätte der doch längst korrigiert!!1

nein, das hätte er NICHT, weil ich am testen bin und du siehst wie oft ich ein Code ändere. Ich kann dir aber gerne, dass du beruhigt bist mein fertigen Code zeigen, dass ich ALLES so wie DU willst eingefügt habe. Nicht dass du heute Nacht wegen MIR nicht gut schlafen kannst!

[Jnnbo]

Hallo Gunnar,

Das kann gar nicht sein. Ich habe Jnnbo schon mehrmals gesagt, dass Eingabefelder unbedingt Beschriftungen (d.h. label) brauchen und dass placeholder keine Beschriftungen sind.

Auch wenn ich und das ist hier nur der Admin Bereich kein Label benötige, hier hast du es, dass du heute Nacht ruhig schlafen kannst, du willst ja immer alles besser wissen, dass man scheinbar ÜBERALL ein label benötigt wird, was absoluter Schwachsinnn ist. Zähle mir drei Gründe auf, warum du es hier für nötigt findest.

<div class="suche">
  <form name="form1" method="post">
    <label for="firma" style="display:none;">Firmennamen</label>
    <input type="text" name="firma" id="tags" placeholder="Firmennamen:">
    <p id="kunden">
      <input type="checkbox" name="gesperrt" id="gesperrt" value="1" >
      <label for="gesperrt" style="width:31em;">gesperrte Kunden einblenden</label>
    </p>
    <input type="submit" name="abschicken" id="abschicken" value="Filtern" class="ok">
  </form>
</div>

Hier mein JQuery Code:

 $(document).ready(function(){
		$("#tags").on('keyup', function() {
		var $this = $(this);
		$('#gesperrt').val('');
		if($this.val()) {
			$this.next('p').css('display', 'none');
		}
		else {
			$this.next('p').css('display', 'block');
		}
	}); 
 });

[Christian Kruse]

Hallo Jnnbo,

<div class="suche">
  <form name="form1" method="post">
    <label for="firma" style="display:none;">Firmennamen</label>
    <input type="text" name="firma" id="tags" placeholder="Firmennamen:">
    <p id="kunden">
      <input type="checkbox" name="gesperrt" id="gesperrt" value="1" >
      <label for="gesperrt" style="width:31em;">gesperrte Kunden einblenden</label>
    </p>
    <input type="submit" name="abschicken" id="abschicken" value="Filtern" class="ok">
  </form>
</div>

gngn Inline-Styles, setze das lieber in eine CSS-Datei. Du handelst dir damit nur Probleme ein.

 $(document).ready(function(){
		$("#tags").on('keyup', function() {
		var $this = $(this);
		$('#gesperrt').val('');
		if($this.val()) {
			$this.next('p').css('display', 'none');
		}
		else {
			$this.next('p').css('display', 'block');
		}
	}); 
 });

Du möchtest statt $('#gesperrt').val(''); lieber $('#gesperrt').prop('checked', false); nutzen. Mit val('') setzt du den Wert auf leer, damit ist die Checkbox für eine eventuelle spätere Verwendung nutzlos. Das prop('checked', false) entfernt den Checked-Status.

LG,
CK

[Jnnbo]

Hallo Christian,

gngn Inline-Styles, setze das lieber in eine CSS-Datei. Du handelst dir damit nur Probleme ein.

ich lass das bei mir eh weg, ich wollte nur dass Gunnar zufrieden ist. Wie gesagt es ist nur für meinen Admin Bereich, da ist ein label überhaupt nicht wichtig.

Du möchtest statt $('#gesperrt').val(''); lieber $('#gesperrt').prop('checked', false); nutzen. Mit val('') setzt du den Wert auf leer, damit ist die Checkbox für eine eventuelle spätere Verwendung nutzlos. Das prop('checked', false) entfernt den Checked-Status.

danke, wird gleich noch geändert.

[woodfighter]

Tach,

ich lass das bei mir eh weg, ich wollte nur dass Gunnar zufrieden ist. Wie gesagt es ist nur für meinen Admin Bereich, da ist ein label überhaupt nicht wichtig.

als jemand, der sich schon länger als du mit Code schreiben beschäftigt: Das ist ein Fehlschluss (aus der selben Kategorie wie „Das ist nur ein kurzfristiger Hack.“ und „Die Dokumentation mache ich später.“), aber das wirst du selber noch lernen, falls du nicht auf die Älteren hören möchtest.

mfg
Woodfighter

[Gunnar Bittersmann]

@@Jnnbo

Auch wenn ich und das ist hier nur der Admin Bereich kein Label benötige

Stand davon bisher irgendwas?

Und sieh’s mal so: Wenn du irdgendwann auf assitive Technologie angewiesen sein solltest (was ich dir nicht wünsche), dann hast du deine Seite schon so, dass du sie weiterhin administrieren kannst.

Außerdem: Was du hier nicht lernst, kannst du anderswo auch nicht.

hier hast du es […] <label for="firma" style="display:none;">Firmennamen</label>

Nein. Nicht davon zu sehen, nichts davon zu hören. Es heißt nicht umsonst _Screen_­reader. Die lesen vor, was auf dem Schirm ist, und lesen nicht, was nicht auf dem Schirm ist, d.h. was mit display: none weggemacht ist, ist weg und wird auch nicht vorgelesen.

Also nicht mit display: none verstecken, sondern z.B. so:

{
  position: absolute !important;
  height: 1px; width: 1px; 
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}

LLAP 🖖

[Jnnbo]

Hallo Gunnar,

Stand davon bisher irgendwas?

also ich glaube das hat hier jetzt jeder kapiert, dass meine Seite nie für die Öffentlichkeit sein wird. Das muss ich doch nicht jedesmal neu schreiben?

[Jnnbo]

Hallo Gunnar,

{
  position: absolute !important;
  height: 1px; width: 1px; 
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}

bist du sicher, dass das auf allen relevanten Browsern schon funktioniert? Wenn ich bei http://caniuse.com/#search=clip schaue, sehe ich dort einige Zahlen davor, ich verstehe nicht wirklich was darüber geschrieben wird. Ich weiß nur, dass Chrome ohne zu meckern es annimmt.

[Gunnar Bittersmann]

@@Jnnbo

bist du sicher, dass das auf allen relevanten Browsern schon funktioniert?

Wenn HTML5Boilerplate das so verwendet, wird’s wohl funktionieren.

LLAP 🖖

[Gunnar Bittersmann]

@@Jnnbo

BTW, es gibt kein CSS4.

LLAP 🖖

[Gunnar Bittersmann]

@@Jnnbo

Nochmal lesen, auch wenn Lesen nicht deine Stärke ist.

ich habe es GELESEN!

Auch VERSTANDEN? „Du kannst über ein pattern festlegen, was gültig sein soll und was nicht.“

Ich möchte ALLES erlauben.

Nein. Du möchtest 2 und mehr Zeichen erlauben, nicht keins oder eins.

Das <p> soll SOFORT verschwinden wenn ich anfange schreibe EGAL was! Das habe ich nun mehrmals bereits geschrieben.

Zuerst schriebst du: „Wenn ich im Feld Firme[sic!] […] mehr als ein Zeichen schreibe, dann soll das Div […] ausgeblendet werden.“ (Hervorhebung von mir) Das ist was Anderes als „SOFORT“. Hab ich das verpasst, dass sich das inzwischen geändert hat?

LLAP 🖖

[Jnnbo]

Hallo Gunnar,

Zuerst schriebst du: „Wenn ich im Feld Firme[sic!] […] mehr als ein Zeichen schreibe, dann soll das Div […] ausgeblendet werden.“ (Hervorhebung von mir) Das ist was Anderes als „SOFORT“. Hab ich das verpasst, dass sich das inzwischen geändert hat?

es soll SOFORT ausgeblendet werden wenn ich einklicke! Außerdem darf es KEIN Pflichtfeld sein, davon habe ich NIE etwas geschrieben. Also geht es wohl mit HTML und CSS nicht, so wie du ja groß geschrieben hast.

[Christian Kruse]

Hallo Jnnbo,

es soll SOFORT ausgeblendet werden wenn ich einklicke!

Was denn jetzt? Wenn du das Element fokussierst? Wenn du anfängst etwas zu tippen? Und wann soll das Element wieder eingeblendet werden? Du musst genauer spezifizieren was du möchtest!

LG,
CK

[Jnnbo]

Hallo Christian,

Was denn jetzt? Wenn du das Element fokussierst? Wenn du anfängst etwas zu tippen? Und wann soll das Element wieder eingeblendet werden? Du musst genauer spezifizieren was du möchtest!

das ist mir eigentlich egal, schön wäre es, wenn es sofort ausgeblendet wird, allerdings würde es auch reichen wenn ich anfange mit schreibe, dann lass ich irgendwie mit jQuery den Hacken der unter Umständen in der Checkbox gesetzt wurde wieder entfernen. (vielleicht sollte das ich das immer machen)

EDIT: http://jsfiddle.net/rgzqg6bf/2/ hier geht es nun per Klick. Jetzt muss ich nur noch irgendwie die Ckeckbox entklicken, wenn ich geklickt habe.

Edit2: OK jetzt wird auch die Checkbox auf einen leeren Wert gesetzt http://jsfiddle.net/rgzqg6bf/3/

[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

[Matthias Apsel]

Hallo Matthias Apsel,

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

Das stimmt so nicht. Ohne required ist es auch gültig, wenn nichts drinsteht.

Bis demnächst
Matthias