In JavaScript kontrollieren, ob eine Frage verpflichtend oder freiwillig ist

Question

Hallo zusammen,

ich habe im Forum noch keine ähnliche Frage gefunden und bin auch durch googlen nicht wirklich weiter gekommen:

Ich habe einen Fragebogen, bei dem jeweils mehrere Skalenfragen und Textfelder auf einer Seite sind. Pro Skala wird das Textfeld nur dann angezeigt, wenn bestimmte Werte ausgewählt wurden (weil dann begründet werden muss, wieso die Auswahl getroffen wurde). Ich würde gerne einstellen, dass das Textfeld dann auch verpflichtend ausgefüllt werden muss. Wenn es gar nicht angezeigt wird, soll es logischerweise nicht verpflichtend sein. Das würde ich also gerne irgendwie elegant im Code lösen.

Hier mein Code für das Anzeigen / Ausblenden der Textfelder:

<script type="text/javascript">
 
/**
 * Find and list inputs (radio) of the
 * scale with the identifier itemID.
 */
function getScaleInputs(itemID) {
    var inputs = {};
    // The regular inputs
    for (var i=1; i<100; i++) {
        var inputID = itemID + i;
        var input = document.getElementById(inputID);
        if (input) {
            inputs[i] = input;
        } else {
            break;
        }
    }
    // And then there may be DK options
    for (var i=-1; i>=-3; i--) {
        var inputID = itemID + "DK" + (-i);
        if (i == -1) {
            inputID = itemID + "DK";
        }
        var input = document.getElementById(inputID);
        if (input) {
            inputs[i] = input;
        }
    }
 
    return inputs;
}
 
/**
 * The class that connects the scale item (identifier itemID)
 * to a text input (or similar) with the identifier inputID.
 * The array "show" defines for which values the
 * input field or item should be displayed.
 */
function linkScaleToInput(itemID, inputID, show) {
    // First, we need all radio inputs for the item
    var radio = getScaleInputs(itemID);
    console.log(radio)

    var element = document.getElementById(inputID);
    element.style.display = "none"

    // We need a function to read the value
    // that was checked in the scale
    function getValue() {
        for (var value in radio) {
            if (radio[value].checked) {
                return parseInt(value);
            }
        }
        return -9;
    }
 
    // Then we need a function to respond
    // to the selection
    function onSelect() {
        var value = getValue();

        // Display, if the value is listed in "show",
        // or hide via display=none
        if (show.indexOf(value) > -1) {
            element.style.display = "";
        } else {
            element.style.display = "none";
        }
    }
 
    for (var value in radio) {
        radio[value].addEventListener("click", onSelect);
    }
 
    // Use the correct display in the beginning
    onSelect();
}

// One instance of the class for each scale item
new linkScaleToInput("A1_01", "A2_qst", [1,2,3]);
 
</script>

In dem Beispiel würde das Textfeld angezeigt werden, wenn auf der Skala Wert 1, 2 oder 3 ausgewählt wurde. Im Idealfall würde ich gerne eine Funktion "setMandatory" schreiben, aber ich weiß nicht, wie genau man diese Eigenschaft setzt.

Ich bin für jede Hilfe dankbar!

Answer 1

ich habe eine Lösung gefunden, die funktioniert. Ich habe ein Array erstellt, in dem ich die verpflichtenden Felder speichern kann. Immer, wenn ein Feld ein- oder ausgeblendet wird, manipuliere ich das Array entsprechend. In einer separaten Funktion überprüfe ich dann für jedes Array Element, ob es sichtbar ist und einen Wert hat. Diese Funktion habe ich mit SoSciTools.questionnaire.attachCheck(); registriert.