JavaScript Formular - Required nur bei bestimmten Inhalten?

[Dsimon24]

Hallo zusammen,

ich habe bspw. das folgende Formular:

<form>
    <select name="x" id="x" required>
        <option value="Grund A">Grund A</option>
        <option value="Grund C">Grund B</option>
        <option value="Grund B">Grund C</option>
        <option value="Anderer Grund">Anderer Grund</option>
    </select>
    <input type="text" name="freitext" id="freitext">
</form>

Im Dropdown muss auf Grund des required-Elements eine Auswahl getroffen werden.
Jetzt kommt mein Problem. Im Freitext-Feld nur zwingend notwendig, wenn im Dropdown
die Option 'Anderer Grund' ausgewählt wurde. Wie kann ich das am besten realisieren?

VG,

 

[Madman1209]

Hi,

indem du entweder vor dem abschicken an den Server das ganze validierst oder dem Server die Validierung überlässt und dann auf die Rückgabe reagierst

VG,
Mad

 

[Toms]

let value = document.getElementById("freitext").value;

if(value != ''){
    // Positive Validierung
}
else{
    // Negative Validierung
}

du kannst dir den Inhalt des Inputs per JS holen:

 

[Dsimon24]

Hi!

Das, was ich mit dem required erreiche, lässt sich auf diese Art nicht realisieren?
Es reicht ja eine Meldung über JS - bitte das Feld ausfüllen. Ob man das durch die
bspw. Deaktivierung von Javascript umgehen könnte, spielt da keine Rolle.

VG,

 

[tollertyp]

Also wenn du Client-seitige Validierung willst (halte ich für sinnvoll), dann nimm auch idealerweise eine entsprechende Bibliothek zur Validierung.

Trotzdem ist eine zusätzliche Server-seitige Validierung Pflicht.

 

[Dsimon24]

Ich hab´s jetzt so versucht - funktioniert aber nicht. Geht das auf diese Weise nicht?

<form>
    <select onchange="checkInputTxt(this)" name="x" id="x" required>
        <option value="Grund A">Grund A</option>
        <option value="Grund C">Grund B</option>
        <option value="Grund B">Grund C</option>
        <option value="Anderer Grund">Anderer Grund</option>
    </select>
    <input type="text" name="freitext" id="freitext">
</form>

var checkInputTxt = function(selectObject) {
    if (selectObject.value == 'Grund B')
    {
        document.getElementById("freitext").required;
    }
}

Das Freitext-Feld kann ich in dieser Konstel-
lation auch problemlos leer absenden.

 

[tollertyp]

Was erhoffst du dir davon? "document.getElementById("freitext").required"?

Schau doch wie du das required über JS setzen kannst.
Siehe z.B. https://stackoverflow.com/questions/18770369/how-to-set-html5-required-attribute-in-javascript

 

[Yuuri]

Trotzdem ist eine zusätzliche Server-seitige Validierung Pflicht.

This.

Dein ausgeliefertes HTML-Konstrukt kann ich mittels Developer-Konsole komplett aushebeln. Validierung im Client dient höchstens besserer UX, aber nirgends der Sicherheit. Das required-Attribut nutzt du ja bereits, mehr brauchts theoretisch nicht.

Im Freitext-Feld nur zwingend notwendig, wenn im Dropdown
die Option 'Anderer Grund' ausgewählt wurde. Wie kann ich das am besten realisieren?

Leg nen change-Handler auf das Element und setz dynamisch das required-Attribut.

https://jsfiddle.net/9mypvk6r/