JavaScript JS - Individuelle required-Felder realisieren?

[Dsimon24]

Moin zusammen,

ich brauche mal eure Hilfe.

Bei einem HTML-Formular setze ich mit 'required' im Input-Bereich fest, ob es sich
bei dem entsprechenden Input-Feld um ein Pflichtfeld handeln soll. Soweit kein Ding.

In diesem Formular habe ich aber am Schluss ein Radio-Button gesetzt. Ich kann
zwischen zwei Möglichkeiten wählen.

Habe ich unten in diesem Bereich die Möglichkeit #1 ausgewählt, sollen es aber
andere Pflichtfelder als bei dem Auswahl der Möglichkeit #2 geben. Wie kann
ich denn das am besten realisieren?

Beispiel:

<form action="/action_page.php" method="post">

  <input type="text" name="fname" required>
  <input type="text" name="lname" required>
  <input type="text" name="phone" required>

  <fieldset>
    <input type="radio" id="m1" name="moeglichkeit" value="Möglichkeit #1">
    <input type="radio" id="m2" name="moeglichkeit" value="Möglichkeit #2">
  </fieldset>

  <input type="submit" value="Submit">
 
</form>

Bei Möglichkeit #1 sollen alle Felder Pflichtfelder sein.
Bei Möglichkeit #2 hingegen nur die ersten beiden.

VG, David

 

[mschuebel]

Ich würde abhängig vom Wert in "moeglichkeit" die required anpassen.
onchange listener auf die radio buttons und dann eben required von den entsprechenden feldern entfernen oder hinzufügen.

 

[axl foli]

Sollen die Pflichtfelder auf derselben Seite gerendert werden?
Wenn ja kannst du doch einfach Felder erzeugen und sie mit js solange ausgeblendet lassen, bis eben die Auswahl getroffen wurde.

Sinngemäß hast du zwei weitere HTML Blöcke, meinetwegen Divs, in denen du die Pflichtfelder einmal für Möglichkeit 1 in div 1 und für Möglichkeit 2 in div 2 darstellst. Mit css haust du ein display:none drüber und jetzt kannst du mit js hingehen und bei entsprechender Auswahl ein display:block setzen.

Solche Konstrukte gibts auf Stackoverflow wie Sand am Meer. Vielleicht sogar auf W3Schools.

 

[MisC]

@axl foli Bei solchen Lösungen kann ich nur mit dem Kopf schütteln.
1. Man baut so etwas grundsätzlich so, dass es auch ohne JavaScript nutzbar ist.
2. Die Felder sollen nicht ausgeblendet werden sondern sind nur keine Pflichtfelder.

@Dsimon24 Mach den kleinsten gemeinsamen Nenner der Felder auf requiered. Hier auch die radio Buttons nicht vergessen. Den Rest regelst du wie @testor007 sagte. Und denk dran alles was auf dem Client geprüft wird ist nicht vertrauenswürdig. Also auch die "action_page.php" muss das alles nochmal prüfen.

 

[axl foli]

@MisC
Eine Fallunterscheidung in HTML? Da bin ich gespannt.
Vielleicht habe ich das Problem des TEs auch falsch verstanden.
Wenn die Felder identisch sind, nur das Attribut "Pflicht" sich ändert, dann kann man mit JQuery und entsprechenden Selektoren eben die Attribute setzen und entfernen.
Wie du das rein in HTML lösen willst, das zeig mir mal bitte, ich bin immer offen für Neues und lerne gerne!

Und PS: Sowas wie onchange oder sonstwas in HTML ist extrem unsauber. Man trennt HTML und JQuery/Javascript IMMER. Programmiere deine Events in einem Script Block, da wos hingehört.

 

[Stelzenlaeufer]

Hallöchen,

das ganze kannst du mit einfachem JavaScript lösen. Dazu benötigst du lediglich event listeners, selektoren und die setAttribute/removeAttribute methoden:

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', () => {
        document.getElementById('m1').addEventListener('change', () => {
            document.querySelector('input[name="phone"]').setAttribute("required", true);
        });
        document.getElementById('m2').addEventListener('change', () => {
            document.querySelector('input[name="phone"]').removeAttribute("required");
        });
    });
</script>

Anmerkungen:

- Wenn du ältere Browser unterstützen willst, kannst du die Arrow-functions auch durch anonyme Funktionen ersetzen.

- Selektoren durch attribute (wie im code document.querySelector('input[name="phone"]')) sind sehr, sehr langsam. Im Normalfall würdest du der textbox auch eine ID geben und dann per ID selektieren.

- Wie meine Vorredner schon erwähnt haben, solltest du daran denken, dass das required attribute umgangen werden kann. Ein required attribute ersetzt eine php-seitige verifikation nicht. Das aber nur nebenbei.

Wenn du weitere Fragen hast, immer her damit

 

[mschuebel]

@axl foli
Prinzipiell hast du schon recht, man schreibt die eventlistener aber, wie @Stelzenlaeufer gezeigt hat, komplett in javascript.

@Stelzenlaeufer
Bzgl. Selektoren und Geschwindigkeit: Mag man in Benchmarks oder anderen komplexeren Anwendungen merken aber in diesem Kontext absolut irrelevant.

 

[MisC]

@MisC
Eine Fallunterscheidung in HTML? Da bin ich gespannt.

Ich hab bewusst "nutzbar" geschrieben.