Gunnar Bittersmann: Pflichtfeld wenn Feld 1 Inhalt hat

Beitrag lesen

@@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