Html5 Formulare in Abhängigkeit

[Tante Uschi]

Hallo,

hat von Euch schonmal jemand den Fall gehabt, bei einem html5 Formular Felder in Abhängigkeit zu bringen?

Beispiel (rein fiktiv):

Feld 1:   Hustensaft wählen (optional)
       Unterfeld 1: Geschmack des Hustensafts
       Unterfeld 2: Farbe des Hustensafts

Wenn nun jemand z.B. das Unterfeld 1 ausfüllt dann müssen die anderen Felder (Feld 1 und Unterfeld 2) automatisch zum Pflichtfeld werden, das lässt sich ja mit JavaScript machen, aber hat das mal jemand in html 5 gemacht, bzw. hat da jemand von Euch eine Idee, ich kann darüber nichts finden im Spinnen-Netz?

Gruß

Linkback: https://www.modified-shop.org/forum/index.php?topic=42953.0

[hpzeller]

So wie ich das sehe, sind in deinem Beispiel alle Felder <select>-Tags, und hierin besteht wohl das Hauptproblem. In CSS gibt es keine Event-Handlers wie bei JavaScript, was es aber gibt, sind Pseudoklassen, die für Formulare siehst du hier, mit denen könnte man, so denke ich, dein Problem ohne Javascript lösen, leider kann man sie aber nur auf <input>-Tags anwenden.

Gruss
Hanspeter

[Tante Uschi]

Hallo Hanspeter,

Es geht um die create_account_guest.html in der sind die Daten jeweils ein input Feld:

[ Für Gäste sind keine Dateianhänge sichtbar ]

Das Problem ist, dass ich einige Formularfelder habe, die von Grund auf nicht required sein sollen:

[ Für Gäste sind keine Dateianhänge sichtbar ]

Wird jedoch eines davon ausgewählt und ganz gleich welches davon, müssen alle anderen zum Pflichtfeld werden:

[ Für Gäste sind keine Dateianhänge sichtbar ]

Vielleicht kannst Du den Knoten lösen.

Edit: mir fehlt so ein wenig das Verständnis, wie html5 das required setzen soll, da ja eigentlich html5 geladen ist, sprich es ändert ja nur das was vorgegeben ist, nämlich das Feld required hat jetzt was, gut dann ist es erledigt, aber wie soll das nachträglich ohne JavaScript gelöst werden wenn eben nachträglich eine Änderung in anderen Feldern kommt, Auf der anderen Seite sieht ja aber das fertige html5 Format, dass ich was eingegeben habe, also verhält es sich ja eben wie JavaScript. *Kopfmatsch*

Gruß und Danke fürs Zeit nehmen

[noRiddle (revilonetz)]

Das geht nur mithilfe von Javascript/jQuery, nicht mit lediglich CSS, insofern ich richtig verstanden habe was du machen möchtest.

Da "required" Felder ja einer Prüfung und ggfls. einer Fehlerausgabe für den Nutzer bedürfen, müssen sie ja bei Absenden des Formulars ohnehin mittels PHP geprüft werden.
Ich denke deshalb, daß man die nicht "required" Felder nur dann anzeigen sollte wenn sie "required" werden, also lediglich das erste Feld von dessen Input die anderen abhängen anzeigen sollte.

Gruß,
noRiddle

[Tante Uschi]

Grüß Dich @noRiddle,

Da "required" Felder ja einer Prüfung und ggfls. einer Fehlerausgabe für den Nutzer bedürfen, müssen sie ja bei Absenden des Formulars ohnehin mittels PHP geprüft werden.

Mhh, bevor die Überprüfung durch php erfolgt, setzt ja schon die Browserseitige Prüfung an, nämlich beim Drücken des Submit Buttons:

[ Für Gäste sind keine Dateianhänge sichtbar ]

Ich denke deshalb, daß man die nicht "required" Felder nur dann anzeigen sollte wenn sie "required" werden

Genau das ist ja der Knackpunkt, wie könnten denn in html5, abhängige Formularfelder erst zu required werden wenn man ein Inputfeld ausfüllt, die Frage ist ja geht das oder eben nicht, JavaScript reagiert ja durch den Event Handler auf die Eingabe und setzt das abhängige Formularfeld auf required, er ändert ja im Grunde den Programmcode, bei html5 macht er die Prüfung Browserseitig auch auf Anhieb, ABER kann html5 auch den Programmcode ändern? Bzw. kann man es triggern das zu tun, das ist ja die Frage: Geht das oder geht das nicht.

Ich hab das schon als JavaScript fertig, aber es wurmt mich das dies nicht mit html5 gehen soll. 

Gruß

[noRiddle (revilonetz)]

Html5 ist statisch, du meinst bestimmt CSS3.
Es geht soweit ich das sehe lediglich mit Javascript, wie ich bereits schrieb.
Wäre es eine Checkbox könnte man mit dem Pseudo-Selector :checked  einiges anfangen, ob jedoch Inputs gefüllt oder Selects ausgewählt wurden, und mit was, ist mit CSS nicht möglich.

Gruß,
noRiddle

[Tante Uschi]

@noRiddle ich danke Dir, damit ist der Kopf frei und die Frage beantwortet ! 

Uff, Danke....

[hpzeller]

[..]
Wäre es eine Checkbox könnte man mit dem Pseudo-Selector :checked  einiges anfangen, ob jedoch Inputs gefüllt oder Selects ausgewählt wurden, und mit was, ist mit CSS nicht möglich.
[...]

Ob ein Input-Feld gefüllt ist kann man mit CSS schon überprüfen, siehe HIER, aber das hilft nicht wirklich weiter, denn man kann mit CSS keine Attribute entfernen oder hinzufügen. Ich habe deshalb versucht, mit CSS einem Input-Feld welches das Attribut "required" hat, es aber nicht haben sollte, mit "display: none" quasi stillzulegen, in der Hoffnung, dass es dann vor dem Absenden des Formulars nicht überprüft wird, leider hat es nicht funktioniert. Das heisst also ein Input-Feld, welches das Attribut "required" hat und leer ist, verhindert auch dann wenn es mit "display: none" belegt wird, dass das Formular gesendet werden kann.

@Tante Uschi
Bist du dir bewusst, dass dir ohne JavaScript die Möglichkeiten welche dir HTML5 Formulare bieten, sehr eingeschränkt sind. So ist es z.B. nicht möglich die Sprache vorzugeben, ausserdem werden zu den Input-Feldern immer nur die Standardtexte angezeigt.
Ich habe in diesem Testshop vor Jahren mal ein HTML5 Formular mit einem jQuery Plugin eingefügt.

Gruss
Hanpster

[Tante Uschi]

Hallo Hanspeter,

Das heisst also ein Input-Feld, welches das Attribut "required" hat und leer ist, verhindert auch dann wenn es mit "display: none" belegt wird, dass das Formular gesendet werden kann.

Mhh, das ist so leider nicht richtig:

Code: XML  [Auswählen]

<div id="2-Person" {if $PERSON_GENDER_TWO == ''} style="display:none" {/if}>

mit JavaScript nicht eingeblendete required Felder, werden definitiv abgesendet:

Code: XML  [Auswählen]

function einblenden () {
       
if (document.getElementById("Anzahl").selectedIndex == "1") {
        document.getElementById("2-Person").setAttribute("style", "display: block");

Ich weiß natürlich nicht, ob wir gerade aneinander vorbeireden und Du das ohne JavaScript meinst, required Felder per JavaScript auf display:none gehen durch.

Achso einer der required Felder im ausgeblendeten Div:

Code: XML  [Auswählen]

<select class="form-control input-sm" name="gender_two" id="Gender-2-Person" required=""><option value="" selected="selected">Bitte wählen</option><option value="m">Herr</option><option value="f">Frau</option></select>

Gruß

[Tante Uschi]

Hallo Hanspeter:

Bist du dir bewusst, dass dir ohne JavaScript die Möglichkeiten welche dir HTML5 Formulare bieten, sehr eingeschränkt sind. So ist es z.B. nicht möglich die Sprache vorzugeben, ausserdem werden zu den Input-Feldern immer nur die Standardtexte angezeigt.

Ja das weiß ich, aber ich versuche manche Dinge sportlich zu nehmen und dazu zählt, dass man ja mal drüber nachdenken kann, jetzt schon zu üben, was html6 so können könnte, denn ich glaube nicht das JavaScript noch lange überleben wird, wenn die KI (ja noRiddle da ist sie wieder ) übernimmt:

Um Webprogrammierern mehr Freiheiten bei Design und Konstruktion einer Website zu bieten, soll es bei HTML6 mehr Möglichkeiten geben, externe Sprachen zu verwenden und diese interpretieren zu lassen. Als Beispiel wurde dafür die Sprache CoffeeScript verwendet, die von einem Präprozessor in JavaScript übersetzt werden kann.

Viele Elemente werden bei der Webprogrammierung aus bestehenden Bibliotheken entnommen, um den Entwicklungsprozess von Anwendungen im Browser zu vereinfachen und beschleunigen. Viele Webprogrammierer wünschen sich dafür eine Vereinheitlichung, da derzeit viele verschiedene Bibliotheken im Einsatz sind. Die Javascript-Bibliothek jQuery könnte für HTML6 zum neuen Standard werden.

könnte, glaub ich aber nicht

Gruß

PS.: was ich glaube ist, dass die ganzen "Vereine" wie Google und Microsoft und wie sie alle heißen schon lange an einer gleichen Sache arbeiten und dass heißt, "Browsersprache", sprich der Browser übernimmt das ohne zusätzliche Dinge wie JavaScript, ist schon mal jemanden aufgefallen das es kein Flash mehr gibt. *kich*

[hpzeller]

Hallo Tante Uschi,

deine Antwort #8 verstehe ich leider nicht, insbesondere als Antwort auf meine Antwort #7 verstehe ich sie nicht.

Gruss
Hanspeter

[hpzeller]

[....]
denn ich glaube nicht das JavaScript noch lange überleben wird, wenn die KI (ja noRiddle da ist sie wieder ) übernimmt:
[...]

Javascript ist nicht nur eine browserseitig Skriptsprache und wird z.B. von Google in Zusammenhang mit Angular sehr oft eingesetzt, insofern denke ich das JavaScript noch lange überleben wird.

Gruss
Hanspeter

[Tante Uschi]

deine Antwort #8 verstehe ich leider nicht, insbesondere als Antwort auf meine Antwort #7 verstehe ich sie nicht.

Und da haben wir das Problem:

mit CSS einem Input-Feld welches das Attribut "required" hat, es aber nicht haben sollte, mit "display: none" quasi stillzulegen

wie ich sagte:

Ich weiß natürlich nicht, ob wir gerade aneinander vorbeireden und Du das ohne JavaScript meinst, required Felder per JavaScript auf display:none gehen durch.

Ich hatte überlesen, dass Du es per CSS versucht hast und haben wir aneinander vorbeigeredet (mein Fehler Entschuldige).

und wird z.B. von Google in Zusammenhang mit Angular sehr oft eingesetzt

Noch, aber schaun wir mal, ich lass das Thema erstmal ruhen mit den jetzigen Mitteln ist das wie noRiddle schon sagte nicht machbar.

Gruß
und ich danke Euch von Herzen für die Mühe, wird ja heutzutage leider alles als selbstverständlich hingestellt.

[noRiddle (revilonetz)]

@hpzeller

Code: CSS  [Auswählen]

:not(:placeholder-shown):not(:focus):invalid

Ja isses denn die Möglichkeit, so etwas hab' ich auch noch nicht gesehen.
Allerdings ist dieses :invalid  nicht verlässlich.

Wie du allerdings auch gesagt hast, man kann mittels CSS Attribute nicht verändern, denn um unsichtbare Form-Elemente nicht abzusenden müsste man sie zumindest mit dem Attribut disabled  versehen.

Gruß,
noRiddle