required setzten

[Gunnar Bittersmann]

@@Google weiß alles

<script type="text/javascript">

BTW, type="text/javascript" ist in HTML5 unnötig.

// wenn das Dokument geladen wird führe aus:
window.onload=function () {

Zu spät. Es muss nicht gewartet werden, bis das gesamte Dokument (inclusive aller eingebetteter Ressourcen wie Bilder, Webfonts, …) geladen ist. Das passende Event ist DOMContentLoaded. Von der Notation mit on… sollte man sowieso Abstand nehmen und addEventHandler() verwenden.

Das kann man sich aber sparen, wenn das Script dort plaziert wird, wo es stehen sollte: nicht im head, sondern am Ende des body.

    // binde die Funktion requireMail() an das Ereignis change für die Objekte:
    document.getElementById('wechselYes').onchange=function () { requireMail(); }
    document.getElementById('wechselNo').onchange=function ()  { requireMail(); }

Elegant könnte man den Eventhandler für ein Vorfahrenelement registrieren und event delegation nutzen.

function requireMail() {
    var obj=document.getElementById('mailadresse');

Es war gewünscht, auch für mehrere Eingabefelder auf einmal required zu setzen bzw. zu löschen. Diese müsste man entsprechend im Markup kennzeichnen und im Script mit einer Schleife durchlaufen.

    if (document.getElementById('wechselYes').checked) {
        obj.required=true;           // Eingabe benötigt
        obj.disabled=false;          // Eingabe erlauben
        //obj.style.display='inline';  // anzeigen
    } else {
        obj.required=false; // Eingabe nicht benötigt
        obj.value=''        // Eingaben löschen
        obj.disabled=true;  // Eingabe verbieten
        //obj.style.display='none';  // Nicht mehr anzeigen
    }

Es war lediglich gewünscht, Felder (nicht) als Pflichtfelder vorzusehen; nicht, in diesen Feldern Eingaben zu verbieten oder gar bereits getätigte Eingaben zu löschen.

Dann ist auch keine if-Abfrage nötig. Der boolesche Wert ist ja gerade derjenige, den man required zuweisen möchte:

obj.required = document.getElementById('wechselYes').checked;

(Entsprechend ginge auch obj.disabled = !document.getElementById('wechselYes').checked;

Und verbergen sollte man das auch nicht per JavaScript (style.display), sondern die bereits im DOM vorhande Information per Stylesheet nutzen: [disabled] { display: none }.)

Die Information, ob required oder nicht, könnte man auch per Stylesheet nutzen und bspw. * bei Pflichtfeldern anzeigen. Ich hab da mal was gebastelt.

(Ich weiß, dass man den Data-URI prozent-codieren müsste, damit das auch im IE funktioniert. Hab ich mir hier mal gespart.)

Eine Frage hab ich dazu aber: Warum kann man statt

document.querySelector("fieldset").addEventListener('click', function ()
{
	requiredOnRequestElements.setRequired();
});

nicht einfach

document.querySelector("fieldset").addEventListener('click', requiredOnRequestElements.setRequired);

schreiben? @Orlok? @1unitedpower?

LLAP 🖖