Christian: Pflichtfeld wenn Feld 1 Inhalt hat

Servus,

ist es möglich wenn im ersten Feld etwas steht, das Feld zum Pflichtfeld zu machen?
Wenn im Feld 1 alles wieder gelöscht wird, muss Feld 2 kein Pflichtfeld mehr sein

<label for="feld1">Feld 1</label>
<input type="text" name="feld1" id="feld1" value="">

<label for="feld2">Feld 2</label>
<input type="text" name="feld2" id="feld2" value="">
  1. Servus!

    Servus,

    ist es möglich wenn im ersten Feld etwas steht, das Feld zum Pflichtfeld zu machen?
    Wenn im Feld 1 alles wieder gelöscht wird, muss Feld 2 kein Pflichtfeld mehr sein

    <label for="feld1">Feld 1</label>
    <input type="text" name="feld1" id="feld1" value="">
    
    <label for="feld2">Feld 2</label>
    <input type="text" name="feld2" id="feld2" value="">
    

    mit dem required-Attribut.

    Herzliche Grüße

    Matthias Scharwies

    --
    Es gibt viel zu tun: ToDo-Liste
  2. So bekomme ich zwar das zweite Feld zum Pflichtfeld

    $('#feld1').keypress(function(){
    			    
      if($(this).val() == ''){
    	$("#feld2").prop('required',false);
      } else {
    	$("#feld2").prop('required',true);
      }
    			
    });
    

    Wenn ich den Text aus Feld 1 lösche bleibt das Pflichtfeld in Feld 1. Wie könnte man dieses lösen?

    1. @@Christian

      So bekomme ich zwar das zweite Feld zum Pflichtfeld

      $('#feld1').keypress(function(){
      			    
        if($(this).val() == ''){
      	$("#feld2").prop('required',false);
        } else {
      	$("#feld2").prop('required',true);
        }
      			
      });
      

      Wenn ich den Text aus Feld 1 lösche bleibt das Pflichtfeld in Feld 1. Wie könnte man dieses lösen?

      Indem du auf das richtige Event lauschst.

      Wenn du auf den Inhalt von Feld 1 reagieren willst, ist irgenein key…-Event garantiert nicht das richtige, denn es gibt ja auch andere Möglichkeiten, etwas in Feld 1 einzutragen, als per Tastatur.

      LLAP 🖖

      --
      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
      1. Hallo Gunnar,

        Indem du auf das richtige Event lauschst. Wenn du auf den Inhalt von Feld 1 reagieren willst, ist irgenein key…-Event garantiert nicht das richtige, denn es gibt ja auch andere Möglichkeiten, etwas in Feld 1 einzutragen, als per Tastatur.

        und was wäre in diesem Fall das richtige Event?

        1. @@Christian

          und was wäre in diesem Fall das richtige Event?

          Die Frage habe ich doch schon beantwortet, bevor du sie gestellt hattest.

          LLAP 🖖

          --
          “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
          1. Hallo Gunnar,

            ich finde deine Lösung von hier sehr unschön? Mir fehlt das richtige Wort. Ich nutze jQuery also kann ich dieses damit auch umsetzten.

            Meine Lösung

            $('#feld1').focusout(function(){
            			    
              if($(this).val() == ''){
                $("#feld2").prop('required',false);
              } else {
                $("#feld2").prop('required',true);
              }
            			
            });
            
            1. @@Christian

              ich finde deine Lösung von hier sehr unschön? Mir fehlt das richtige Wort.

              „Nicht verstanden“?

              LLAP 🖖

              --
              “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
            2. Hallo Christian,

              ob Du das mit low-level DOM Funktionen machst oder mit jQuery, ist doch wumpe. Relevant sind zwei Hinweise. Einen davon hast Du teilweise umgesetzt, und den anderen ignoriert.

              • Ein key-Event ist ungeeignet weil ein Feld sich durch andere Ursachen ändern kann. Soweit ok, du hast nun focusout genommen. Damit erkennst Du Änderungen, sobald das Feld verlassen wird. Eine ähnliches Verhalten erreichst Du mit dem 'change' event, das semantisch besser passt und das auch nur dann fliegt, wenn tatsächlich eine Änderung da ist. Gunnar hatte input genommen, das wird bei jeder Änderung des input-Elements sofort gefeuert, nicht erst beim Verlassen. Es ist deine Entscheidung, ob du dieses "Echtzeitverhalten" brauchst oder nicht.
              • Aber: Ein Event Handler allein reicht nicht, weil Du auch eine initiale Überprüfung brauchst. Dein JavaScript sollte daher die Required-Prüfung einmal auch direkt nach Aufbau der Seite durchführen. Gunnar hat das in einen DOMContentLoaded Handler verpackt, das ist mit jQuery recht leicht zu machen (und die Registrierung des Eventhandlers gehört eh dort hinein).
              • Es gibt drittens auch noch die Möglichkeit, dass ein input-Feld durch Javascript geändert wird. In dem Fall fliegt gar kein Event, du musst es selbst triggern. Mit jQuery ist das einfach.

              Deswegen so, und auch gerne mit jQuery. Ich habe noch einen Click-Handler für einen hypothetischen button mit id="setFeld1" hinzugefügt, um zu zeigen, wie Du das gebuchte Event in diesem Fall selbst triggern musst.

              $(function() {
                 // Required-Handler für change-Event registrieren
                 $("#feld1").on("change", requireFeld2WhenFeld1Filled);
              
                 // Handler einmal direkt aufrufen für Anfangszustand
                 requireFeld2WhenFeld1Filled();
              
                 // Steuerfunktion für required-Attribut am feld1
                 function requireFeld2WhenFeld1Filled() {
                    $("#feld2").prop("required", $("#feld1").val() !== '');
                 }
              
                 // Demo-Code für einen hypothetischen Button, der #feld1 ändert
                 $("button#setFeld1").on("click", function() {
                    $("#feld1").val("Yahoo!").trigger("change");
                 });
              });
              

              Kurze Erläuterung zur require... Funktion: Ich bin persönlich ein Fan von kompakten Code, deswegen ersetze ich (genau wie Gunnar in seinem Vorschlag) Konstrukte wie

              if (bedingung)
              {
                 some.property = true;
              }
              else
              {
                 some.property = false;
              }
              

              sehr gerne - sofern keine anderen Gründe dagegen sprechen - durch

              some.property = bedingung;
              

              Und noch ein kleiner Tipp: Wenn Du eine unmittelbare optische Kontrolle haben willst, ob deine required-Logik funktioniert, kannst Du eine CSS-Regel dieser Art setzen:

              #feld2[required] { background-color: yellow; }
              

              dann wird #feld2 gelb angepinselt sobald es required ist.

              Rolf

              --
              Dosen sind silbern
  3. @@Christian

    ist es möglich wenn im ersten Feld etwas steht, das Feld zum Pflichtfeld zu machen?
    Wenn im Feld 1 alles wieder gelöscht wird, muss Feld 2 kein Pflichtfeld mehr sein

    Zunächst holst du dir dir Referenzen auf die Felder, z.B.:

    const feld1Element = document.querySelector('#feld1');
    const feld2Element = document.querySelector('#feld2');
    

    Den Inhalt von Feld 1 erhältst du mit feld1Element.value.

    Ob Feld 2 Pflichtfeld ist, steht in feld2Element.required (boolescher Wert).

    Wenn im ersten Feld etwas steht, also feld1Element.value nicht leer ist, soll feld2Element.required den Wert true haben, ansonsten false, d.h.:

    feld2Element.required soll denselben booleschen Wert haben wie der Vergleich feld1Element.value !== '':

    feld2Element.required = (feld1Element.value !== '');
    

    Das willst du ausführen, wenn

    • die Seite geladen wird
    • sich der Inhalt von Feld 1 ändert

    Du packst das in eine Funktion

    function conditionallyRequired()
    {
    	feld2Element.required = (feld1Element.value !== '');
    }
    

    registrierst einen Eventhandler für das input-Event

    feld1Element.addEventListener('input', conditionallyRequired);
    

    und einen für das DOMContentLoaded-Event, um die Funktion nach dem Laden der Seite auszuführen

    document.addEventListener('DOMContentLoaded', conditionallyRequired);
    

    (Wenn das Script sowieso erst nach dem Laden der Seite ausgeführt wird, tut es dafür auch conditionallyRequired();.)

    LLAP 🖖

    --
    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory