Pflichtfeld wenn Feld 1 Inhalt hat

[Christian]

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="">

[Matthias Scharwies]

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

[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?

[Gunnar Bittersmann]

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

[Christian]

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?

[Gunnar Bittersmann]

@@Christian

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

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

LLAP 🖖

[Christian]

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);
  }
			
});

[Gunnar Bittersmann]

@@Christian

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

„Nicht verstanden“?

LLAP 🖖

[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

[Gunnar Bittersmann]

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