Pflichtfeld wenn Feld 1 Inhalt hat

[Rolf B]

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