Anzeigen von Fehlermeldungen gleichzeitig in Radio Button Validation

Question

Ich habe ein Formular mit Optionsfeldern. Es gibt drei Gruppen von Optionsfeldern (opt-out1, opt-out2, opt-out3). Für jede Gruppe muss ein Optionsfeld ausgewählt sein, bevor das Formular gesendet werden kann. Ich schrieb eine Funktion, um zu bestätigen, dass mindestens eine Optionsschaltfläche in jeder Gruppe ausgewählt ist. Wenn keine ausgewählt ist, wird eine Fehlermeldung angezeigt.

Das Problem ist, dass die Fehlermeldungen nacheinander statt alle auf einmal angezeigt werden. Wenn beispielsweise eine Schaltfläche für Gruppe 1 und nicht für Gruppen 2 & 3 ausgewählt ist, wird die Fehlermeldung beim Senden nur für Gruppe zwei angezeigt, dann erneut mit einer für Gruppe zwei ausgewählten Schaltfläche. Dann wird die nächste Fehlermeldung angezeigt für Gruppe 3.

Wie kann ich meine JavaScript-Funktion neu schreiben, so dass, wenn es mehr als eine Fehlermeldung gibt (dh zwei oder mehr Gruppen haben keine Schaltfläche ausgewählt), dass die Fehlermeldungen zur gleichen Zeit statt einer zeigen einzeln?

Ich habe versucht, die Funktion in drei Funktionen zu brechen und jede Funktion beim Senden aufrufen, aber in diesem Fall die Fehlermeldungen gleichzeitig angezeigt, aber verschwand in einem Bruchteil Sekunde nach dem Formular verarbeitet (und es sollte nicht verarbeiten, wenn eine Gruppe nicht ausgewählt ist).

Jede Eingabe wird sehr geschätzt.

HTML FORM:

<div id="opt-out-form"> 
    <form name="frmSubscription" method="get" action="" onSubmit="return validate();"> 

     <input type="radio" name="opt-out1" value="test-1" id="1">Test-1<br> 
     <input type="radio" name="opt-out1" value="test-2" id="2">Test-2<br> 
     <input type="radio" name="opt-out1" value="test-3" id="3">Test-3<br><br><br> 
     <div id="message1"></div> 


     <input type="radio" name="opt-out2" value="test-4" id="4">Test-4<br> 
     <input type="radio" name="opt-out2" value="test-5" id="5">Test-5<br> 
     <input type="radio" name="opt-out2" value="test-6" id="6">Test-6<br><br><br> 
     <div id="message2"></div> 


     <input type="radio" name="opt-out3" value="test-7" id="7">Test-7<br> 
     <input type="radio" name="opt-out3" value="test-8" id="8">Test-8<br> 
     <input type="radio" name="opt-out3" value="test-9" id="9">Test-9<br> 
     <input type="radio" name="opt-out3" value="test-10" id="10">Other: <input type="text" name="other_reason" />​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​<br><br><br> 
     <div id="message3"></div> 

     <input type="submit" id="opt-out-button" value="Submit"> 

    </form> 
    </div> 
</div> 

javascript:

function validate() { 

    var a1 = document.getElementById('1'); 
    var a2 = document.getElementById('2'); 
    var a3 = document.getElementById('3'); 

    var b1 = document.getElementById('4'); 
    var b2 = document.getElementById('5'); 
    var b3 = document.getElementById('6'); 

    var c1 = document.getElementById('7'); 
    var c2 = document.getElementById('8'); 
    var c3 = document.getElementById('9'); 
    var c4 = document.getElementById('10'); 

    if ((a1.checked == false) && (a2.checked == false) && (a3.checked == false)) { 
    document.getElementById("message1").innerHTML = "SELECT GROUP 1"; 
    return false; 
    } 

    else if ((b1.checked == false) && (b2.checked == false) && (b3.checked == false)) { 
    document.getElementById("message2").innerHTML = "SELECT GROUP 2"; 
    return false; 
    } 

    else if ((c1.checked == false) && (c2.checked == false) && (c3.checked == false)) { 
    document.getElementById("message3").innerHTML = "SELECT GROUP 3"; 
    return false; 
    } 

    else { 
    return true; 
    } 
} 

Answer 1

Mit Hilfe eines if Block wie das nur eine Bedingung wahr zu sein erlaubt. Brechen Sie sie auseinander und verwenden Sie eine Variable, um das Gesamtergebnis Ihrer Funktion zu bestimmen.

function validate() { 

    var a1 = document.getElementById('1'); 
    var a2 = document.getElementById('2'); 
    var a3 = document.getElementById('3'); 

    var b1 = document.getElementById('4'); 
    var b2 = document.getElementById('5'); 
    var b3 = document.getElementById('6'); 

    var c1 = document.getElementById('7'); 
    var c2 = document.getElementById('8'); 
    var c3 = document.getElementById('9'); 
    var c4 = document.getElementById('10'); 

    var flag = true; 

    if ((a1.checked == false) && (a2.checked == false) && (a3.checked == false)) { 
    document.getElementById("message1").innerHTML = "SELECT GROUP 1"; 
    flag = false; 
    } 

    if ((b1.checked == false) && (b2.checked == false) && (b3.checked == false)) { 
    document.getElementById("message2").innerHTML = "SELECT GROUP 2"; 
    flag = false; 
    } 

    if ((c1.checked == false) && (c2.checked == false) && (c3.checked == false)) { 
    document.getElementById("message3").innerHTML = "SELECT GROUP 3"; 
    flag = false; 
    } 

    return flag; 
}