Bernd: Wenn eine Bestimmte Nummer eingegeben wurde dann weiteres Feld = Pflichtfeld

Hallo,

ist folgendes möglich

<form method="post" name="form_prio">
	
  <label for="nummer">Nummer</label>
	<input type="text" name="nummer" id="nummer" required>
	
  <label for="farbe">Farbe</label>
	<input type="text" name="farbe" id="farbe" value="">

	<input type="submit" name="abschicken" value="Eintragen" id="btn_eintragen">

</form>

Wenn ich im ersten Feld eine Nummer zwischen 100 und 189 eintrage dann soll das unter Feld ein Pflichtfeld werden. Ist dieses möglich?

  1. Für Dein Beispiel:

    <html>
    <form method="post" name="form_prio">
    
      <label for="nummer">Nummer</label>
    	<input type="text" name="nummer" id="nummer" required>
    
      <label for="farbe">Farbe</label>
    	<input type="text" name="farbe" id="farbe" value="">
    
    	<button id="btn_eintragen" value="Eintragen">Eintragen</button>
    
    </form>
      <script type="text/javascript">
        document.getElementById("nummer").addEventListener(
          "change",
          function () {
            var v = Number( document.getElementById("nummer").value );
            var o = document.getElementById("farbe");
            o.required = ( 100 <= v && 189 >= v );
          }
       );
    </script>
    </html>
    

    (<input> für submit durch das aktuelleren <button> ersetzt.)

    Die Schritte:

    • Mit document.getElementById("nummer").addEventListener wird eine Ereignisüberwachung hinzugefügt. Hier habe ich mich für "change" entschieden, das "feuert" wenn der Wert (value) des Formularfeldes geändert (und dieses also verlassen) wird.

    • Ich habe eine anonyme Funktion gewählt. function () {...}

    • Die Zeile var v = Number( document.getElementById("nummer").value ); sorgt dafür, dass der Text(!) im Input als Zahl bereit steht. Das ist für den nachfolgenden Vergleich wichtig.

    • Die Variablen o und v sind nur lokal, also innerhalb der anonymen Funktion gültig (deshalb var o = ...).

    • In Abhängigkeit vom Wert wird in der Zeile o.required = ( 100 <= v && 189 >= v ); für den zweiten Input die Eigenschaft required true oder false gesetzt.

    Natives Javascript reicht. JQuery ist dafür völlig obsolet.

    1. Hallo,

      Natives Javascript reicht. JQuery ist dafür völlig obsolet.

      obsolet bedeutet „veraltet“, du meinst „superliquid“...

      Gruß
      Kalk

      1. Hi there,

        Natives Javascript reicht. JQuery ist dafür völlig obsolet.

        obsolet bedeutet „veraltet“, du meinst „superliquid“...

        Ich versuch' noch immer 'rauszufinden, wofür jQuery eigentlich nicht überflüssig ist…

        1. Hallo @klawischnigg,

          Ich versuch' noch immer 'rauszufinden, wofür jQuery eigentlich nicht überflüssig ist…

          für Framework-phile Entwickler, die 100 Byte document-Methoden-Aufrufe sparen wollen … und dafür etliche KB jQuery einbinden, „weil man es ja eh hat“ 😉

          Viele Grüße
          Robert

        2. Ich versuch' noch immer 'rauszufinden, wofür jQuery eigentlich nicht überflüssig ist…

          Für sehr große Projekte mit extremem und variablen User-Interface. Also nicht für "Webseiten" im klassischen Sinn, aber für regelrechte (Web)anwendungen sollte man dann doch sowas haben.

          1. @@Regina Schaukrug

            Ich versuch' noch immer 'rauszufinden, wofür jQuery eigentlich nicht überflüssig ist…

            Für sehr große Projekte mit extremem und variablen User-Interface. Also nicht für "Webseiten" im klassischen Sinn, aber für regelrechte (Web)anwendungen sollte man dann doch sowas haben.

            Warum sollte?

            Man kann bei Webanwendungen genauso JavaScript-native APIs verwenden wie bei klassischen Webseiten.

            Native APIs (DOM, Fetch, …) leisten heutzutage das, wozu jQuery einst mal gut war: Komplexität wegkapseln. Und das stellenweise weitaus besser.

            LLAP 🖖

            --
            „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
            1. Native APIs (DOM, Fetch, …) leisten heutzutage das, wozu jQuery einst mal gut war

              Dass ich mich davor gedrückt habe erweist sich jetzt demnach als "vorteilhaft".

        3. Hallo klawischnigg,

          Ich versuch' noch immer 'rauszufinden, wofür jQuery eigentlich nicht überflüssig ist…

          Meine Rede. Bin allerdings überrascht, dass doch viele das ähnlich sehen, weil wenn ich so etwas poste kommt eher Gegenwind als Rückendeckung. Deshalb habe ich mir nochmal eine Aussage von Matthias rausgesucht,

          …Aber auch hier gilt: Eine weitverbreitete Lösung, die regelmäßigen Verbesserungen unterliegt, ist besser als was selbstgestricktes…

          die ich "bis jetzt",schon fast für allgemeingültig angesehen habe, also die Meinung der Masse hier. Doch dem scheint ja gar nicht so zu sein.

          Gruss
          Henry

          1. @@Henry

            …Aber auch hier gilt: Eine weitverbreitete Lösung, die regelmäßigen Verbesserungen unterliegt, ist besser als was selbstgestricktes…

            die ich "bis jetzt",schon fast für allgemeingültig angesehen habe, also die Meinung der Masse hier. Doch dem scheint ja gar nicht so zu sein.

            Nichts gegen zu sagen. Aber die nativen JavaScript-APIs, die jQuery heutzutage weitgehend überflüssig machen, sind auch nichts Selbstgestricktes.

            LLAP 🖖

            --
            „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    2. Hallo Regina Schaukrug,

      vielen lieben Dank für deine schnelle Hilfe.

      (<input> für submit durch das aktuelleren <button> ersetzt.)

      Ich weiß ich sollte mich an die Buttons gewöhnen. Es ist allerdings so verlockend im Sublime Editor mit der Autovervollständigung zu arbeiten und diese macht automatisch ein <input>

      Natives Javascript reicht. JQuery ist dafür völlig obsolet.

      Wenn in einem Projekt jQuery bereits eingebunden ist, dann könnte man doch auch die Funktionen nutzen?

      Hier habe ich mich für "change" entschieden

      Wie würde ich es umsetzten wenn ich z.B. die Seite zum bearbeiten wieder bereitstelle? Dann kann ich nicht auf change hoffen?

      1. Definiere:

        wenn ich z.B. die Seite zum bearbeiten wieder bereitstelle?

        Wenn Du die Seite serverseitig zusammenbaust (PHP?) und mit dem Input einen Wert übermittelst, dann kannst und solltest Du das entsprechende Attribut required auch schon serverseitig setzen. Das Skript setzt das Attribut bei einer Änderung des Wertes in "Nummer" ggf. auf false.

        Hinweis: Möglicherweise muss auch die Farbe zurückgesetzt werden. if {…} else {…} hilft Dir dann weiter.

        Ich hoffe sehr, das soll kein Webshop werden.

        1. Hallo,

          Ich hoffe sehr, das soll kein Webshop werden.

          nein, das wird eine To-Do Liste. Bei bestimmten Nummern muss eine Farbe mit hinterlegt werden. Dafür habe ich dieses gebraucht.

  2. @@Bernd

    Wenn ich im ersten Feld eine Nummer zwischen 100 und 189 eintrage dann soll das unter Feld ein Pflichtfeld werden. Ist dieses möglich?

    Ja, mit JavaScript:

    Aufs change-Event bei #nummer lauschen und das required-Attribut bei #farbe entsprechend setzen/löschen.

    <input type="submit" name="abschicken" value="Eintragen" id="btn_eintragen">

    Für den Submit-Button solltest du besser das für Buttons vorgesehene button-Element verwenden.

    LLAP 🖖

    --
    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    1. @@Gunnar Bittersmann

      Da hatte ich den Tab wohl schon zu lange offen. Ein Click auf ⟳ hätte mir etliche Tastaturclicks erspart. 😉

      LLAP 🖖

      --
      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    2. hallo @Gunnar

      Für den Submit-Button solltest du besser das für Buttons vorgesehene button-Element verwenden.

      Darf man nach dem Grund fragen?

      1. Darf man nach dem Grund fragen?

        Ja. Klar.

        Note: While <input> elements of type "button" are still perfectly valid HTML, the newer <button> element is now the favored way to create buttons. Given that a <button>’s label text is inserted between the opening and closing tags, you can include HTML in the label, even images.

        Außerdem könnte <input type="button"> irgend wann mal aus dem Standard fliegen und genau dann hast Du mit den alten Seiten weniger Arbeit wenn Du schon jetzt die neuere Methode einsetzt.

        1. @@Regina Schaukrug

          Außerdem könnte <input type="button"> irgend wann mal aus dem Standard fliegen und genau dann hast Du mit den alten Seiten weniger Arbeit wenn Du schon jetzt die neuere Methode einsetzt.

          Selbst wenn <input type="button">/"submit"/"reset" deprecated werden sollte, werden Browser das weiterhin unterstützen. Man will ja nicht das Web kaputtmachen.

          LLAP 🖖

          --
          „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
          1. Man will ja nicht das Web kaputtmachen.

            Google hat da manchmal sehr eigene Vorstellungen. Und mit Chrome/Chromium auf den Androiden auch eine gewaltige Macht, sich durchzusetzen.

        2. Hi,

          Ja. Klar.

          Note: While <input> elements of type "button" are still perfectly valid HTML, the newer <button> element is now the favored way to create buttons. Given that a <button>’s label text is inserted between the opening and closing tags, you can include HTML in the label, even images.

          Dazu kommt, dass Beschriftung und value bei einem Button unabhängig voneinander sind.

          Viele Grüße
          Robert

        3. hallo

          Darf man nach dem Grund fragen?

          Ja. Klar.

          Note: While <input> elements of type "button" are still perfectly valid HTML, the newer <button> element is now the favored way to create buttons. Given that a <button>’s label text is inserted between the opening and closing tags, you can include HTML in the label, even images.

          Außerdem könnte <input type="button"> irgend wann mal aus dem Standard fliegen und genau dann hast Du mit den alten Seiten weniger Arbeit wenn Du schon jetzt die neuere Methode einsetzt.

          Solange da nicht deprecated steht, habe ich nichts zu befürchten, solange der Standard html5 heisst.

          1. Hallo beatovich,

            Solange da nicht deprecated steht, habe ich nichts zu befürchten, solange der Standard html5 heisst.

            Stimmt. Auch erlaubte Dinge können weniger sinnvoll als andere erlaubte Dinge sein.

            Bis demnächst
            Matthias

            --
            Rosen sind rot.
        4. Hi,

          Thema Button vs. Input type='button':

          wenn Du schon jetzt die neuere Methode einsetzt.

          Hm. Ok, input gab's schon in HTML 3.2, aber button gab's schon in HTML 4.0 (ohne die 1), welches inzwischen vor knapp 20 Jahren (24.04.1998, die Drafts dazu sind noch älter) zur Recommendation wurde. Also it-technisch gesehen auch schon ein biblisches Alter …

          cu,
          Andreas a/k/a MudGuard

          1. Hallo

            Thema Button vs. Input type='button':

            wenn Du schon jetzt die neuere Methode einsetzt.

            Hm. Ok, input gab's schon in HTML 3.2, aber button gab's schon in HTML 4.0 (ohne die 1) … Also it-technisch gesehen auch schon ein biblisches Alter …

            Aber immer noch neuer als die ältere Methode. Das kriegst'e nich wech. ;-)

            Tschö, Auge

            --
            Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.
            Toller Dampf voraus von Terry Pratchett
            1. Hi,

              Aber immer noch neuer als die ältere Methode. Das kriegst'e nich wech. 😉

              Unendlich plus 1 ist größer als Unendlich, ja.

              cu,
              Andreas a/k/a MudGuard

              1. Hallo MudGuard,

                Unendlich plus 1 ist größer als Unendlich, ja.

                Nö nö nö nö nö nönö.

                Bis demnächst
                Matthias

                --
                Rosen sind rot.
      2. @@beatovich

        Für den Submit-Button solltest du besser das für Buttons vorgesehene button-Element verwenden.

        Darf man nach dem Grund fragen?

        1. Bei button ist der Text da, wo er hingehört: im Elementinhalt, nicht wie bei input in einem Attribut.

          Damit kann die Button-Beschriftung auch Markup enthalten:

          <button>
           <strong>Gehe in das Gefängnis.</strong>
           Begib Dich direkt dorthin. Gehe nicht über Los. Ziehe nicht 4000 Euro ein.
          

        </button>

        
        oder ein Icon (`svg`, `img`):
        
        ~~~HTML
        <button>
         <svg>…</svg>
         Frei parken
        </button>
        
        1. Wenn Eingabefelder und Buttons schon anhand ihres Elementtyps unterschieden werden, ist der Quellcode besser lesbar.

        LLAP 🖖

        --
        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
        1. @@Gunnar Bittersmann

          Für den Submit-Button solltest du besser das für Buttons vorgesehene button-Element verwenden.

          Darf man nach dem Grund fragen?

          Einen hab ich noch:

          Bei button kann man Pseudoelemente button::before, button::after verwenden, bei input nicht.


          <button>
          	<strong>Gehe in das Gefängnis.</strong>
          	Begib Dich direkt dorthin. Gehe nicht über Los. Ziehe nicht 4000 Euro ein.
          </button>
          

          Dafür könnte besser sein:

          <div class="clickable-area">
          	<button>Gehe in das Gefängnis.</button>
          	<p>Begib Dich direkt dorthin. Gehe nicht über Los. Ziehe nicht 4000 Euro ein.</p>
          </div>
          

          Dann bekommen Screenreader-Nutzer nicht jedesmal beim Fokussieren des Buttons den gesamten Text vorgelesen, sondern nur die Buttonbeschriftung „Gehe in das Gefängnis.“

          Mit Stil:

          .clickable-area
          {
          	position: relative;
          	border: thin solid;
          	border-radius: 0.5em;
          	padding: 1em;
          	background: hsl(200, 80%, 80%);
          }
          
          .clickable-area button
          {
          	border: none;
          	background: transparent;
          	padding: 0;
          	font: inherit;
          	font-weight: bold;
          }
          
          .clickable-area button::after
          {
          	content: '';
          	position: absolute;
          	top: 0;
          	right: 0;
          	bottom: 0;
          	left: 0;
          }
          
          .clickable-area p
          {
          	margin: 0;
          }
          

          LLAP 🖖

          --
          „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
          1. hallo

            @@Gunnar Bittersmann

            Du musst aber noch mit Javascript deiner clickable-area die entsprechende submit-Funtionalität geben.

            1. @@beatovich

              Du musst aber noch mit Javascript deiner clickable-area die entsprechende submit-Funtionalität geben.

              Nein. Das Pseudoelement button::after liegt im DOM innerhalb des buttons, ist also clickbar. Durch die absolute Positionierung füllt es aber die gesamte clickable-area aus.

              LLAP 🖖

              --
              „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
              1. hallo

                Du musst aber noch mit Javascript deiner clickable-area die entsprechende submit-Funtionalität geben.

                Nein. Das Pseudoelement button::after liegt im DOM innerhalb des buttons, ist also clickbar. Durch die absolute Positionierung füllt es aber die gesamte clickable-area aus.

                Ok, verstanden. Trotzdem, hoffentlich werde ich nie solchem Code im echten Leben begegnen.

                1. @@beatovich

                  Trotzdem, hoffentlich werde ich nie solchem Code im echten Leben begegnen.

                  Warum? Ist doch nützlich. Auch bei Links.

                  LLAP 🖖

                  --
                  „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                  1. hallo

                    @@beatovich

                    Trotzdem, hoffentlich werde ich nie solchem Code im echten Leben begegnen.

                    Warum? Ist doch nützlich. Auch bei Links.

                    Also wenn du den Text dem Screenreader vorenthalten musst, kann das nicht so nützlich sein.

                    1. @@beatovich

                      Ist doch nützlich. Auch bei Links.

                      Also wenn du den Text dem Screenreader vorenthalten musst, kann das nicht so nützlich sein.

                      Eine Untersuchung sagt anderes.

                      Natürlich liest ein Screenreader auch die längere Beschreibung vor, wenn er gerade an der Stelle ist. Wenn der Nutzer aber von Link zu Link springt, wird nur der kürzere Linktitel angesagt. Praktisch.

                      LLAP 🖖

                      --
                      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                      1. hallo

                        Eine Untersuchung sagt anderes.

                        Das kann mich denoch nicht von solch aufwändigen Hacks überzeugen, die noch nicht mal notwendig sind.

                        1. @@beatovich

                          Eine Untersuchung sagt anderes.

                          Das kann mich denoch nicht von solch aufwändigen Hacks überzeugen, die noch nicht mal notwendig sind.

                          Wieso Hack?

                          Wieso nicht notwendig? Wie willst du das sonst umsetzen?

                          LLAP 🖖

                          --
                          „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                          1. hallo

                            Wieso Hack?

                            Wieso nicht notwendig? Wie willst du das sonst umsetzen?

                            Gar nicht! Ich finde es nämlich verwirrend.