div ansprechen


Sprint

Erfahrenes Mitglied
Hallo zusammen,

ich habe hier ein Formular, das per JS überprüft wird. Dabei wird den leeren Feldern eine CSS Class zur Markierung angehängt. Das funktioniert bei input einwandfrei. Select Felder werden aber mit "select2.js" formatiert. Dabei wird von dem Script um das eigentliche select ein div erzeugt.

Ich habe jetzt das Problem, daß ich weder das nachträglich erzeugte div, dessen id bekannt ist, noch ein weiteres Hilfs-div (id="teilnehmer_box") ansprechen kann. Dieses Hilffs-div hatte ich testweise eingesetzt, falls dem Überprüfungsscript das nachträglich erzeugte div nicht bekannt wäre.

So sieht das ganze aus:
CSS:
#buchung input.error_class, #buchung #teilnehmer_box.error_class {
    outline: 2px solid #f00;
}
Code:
<form class="order" id="buchung">
    <label for="" class="inputs">
        <span>Teilnehmer *</span>
        <div id="teilnehmer_box">    <!-- Hilfs-div -->
           <div class="select2-container select_white" id="s2id_teilnehmer"></div> <!-- durch select2.js erzeugt -->
            <select class="select_white" name="teilnehmer" id="teilnehmer" onchange="getCal();">
                <option value="0" disabled selected>0</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
        </div>
    </label>
    <label for="" class="inputs">
        <span>Datum *</span>
        <input type="text" name="datum" id="datum" />
    </label>
</form>
Wie kann ich entweder das div "teilnehmer_box" oder das "s2id_teilnehmer" ansprechen?
 

Sempervivum

Erfahrenes Mitglied
Test ich es mit diesem statischen HTML und CSS funktioniert es problemlos. Muss mit dem Drumherum zu tun haben und damit, dass das div dynamisch erzeugt wird.
 

Sempervivum

Erfahrenes Mitglied
Genau wie Du es gepostet hast, nur die Klassen gesetzt:
Code:
    <style>
        #buchung input.error_class,
        #buchung #teilnehmer_box.error_class {
            outline: 2px solid #f00;
        }
    </style>
    <form class="order" id="buchung">
        <label for="" class="inputs">
            <span>Teilnehmer *</span>
            <div id="teilnehmer_box" class="error_class">
                <!-- Hilfs-div -->
                <div class="select2-container select_white " id="s2id_teilnehmer "></div>
                <!-- durch select2.js erzeugt -->
                <select class="select_white " name="teilnehmer " id="teilnehmer " onchange="getCal(); ">
                    <option value="0 " disabled selected>0</option>
                    <option value="1 ">1</option>
                    <option value="2 ">2</option>
                    <option value="3 ">3</option>
                </select>
            </div>
        </label>
        <label for=" " class="inputs ">
            <span>Datum *</span>
            <input class="error_class " type="text " name="datum " id="datum " />
        </label>
    </form>