Require Antwort von Radiobutton, um zur nächsten Seite in HTML zu gehen

Question

Ich möchte sicherstellen, dass Themen meine Radiobutton Frage auf meiner Online-Umfrage beantworten, um in der Lage zu sein, auf die nächste Seite zu gehen. Wenn sie nicht antworten, möchte ich eine Popup-Nachricht mit der Nachricht "Bitte beantworten Sie die Frage" erhalten.

Dies ist der Code, den ich habe, und wo ich möchte die Forderung stellen:

<div class="page" id="6" style="display: none;"> 
    <div class="cell"> 
     <div align="center"> 
     <h1>Do you hear a speech disfluency?</h1></div>  
     <br /> 
     <audio src="sw2368_so_we-ve_got_you_know_we-ve_got.mp3" type="audio/mp3" preload="auto" controls="controls" oncontextmenu="return false;">Audio could not be loaded.</audio> 
     <br /> 
     <div class="radio"> 
      <label> 
      <input name="Q1Answer" type="radio" value="Y" />Yes</label> 
     </div> 
     <br /> 
     <div class="radio"> 
      <label> 
      <input name="Q1Answer" type="radio" value="N" />No</label> 
     </div> 
     <br /> 
    </fieldset> 
    <input type="button" value="Continue" onclick="next();" /> 
    </div> 
</div> 

Thank you!

Answer 1

Alternative 1. Sie haben eine von ihnen defaultly geprüft, wenn Seite durch Hinzufügen checked geöffnet wird, so wird es so sein:

<div class="radio"> 
<label><input name="Q1Answer" type="radio" value="Y" checked/>Yes</label> 
</div> 

Oder ...

Alternative 2. Fügen Sie diese Zeile in der ersten Zeile der nächsten() Funktion: Wenn Sie jQuery verwenden:

if (!$('input[name=Q1Answer]:checked').length) return; 

Es wird next() Funktion verhindert die Ausführung fortzusetzen, wenn es keine Taste Radio ist überprüft.

UPDATE: Sorry, ich habe vergessen, dass Sie eine Nachricht anzeigen möchten. So fügen Sie einfach diese:

if (!$('input[name=Q1Answer]:checked').length) { 
    alert("Please answer the question."); 
    return; 
} 

UPDATE 2: Wenn Sie nicht jQuery verwenden, ist dies die reine Javascript-Lösung:

Nur müssen die, wenn die Bedingung zu, dies zu ändern:

if (!document.querySelectorAll('input[name=Q1Answer]:checked').length) { 
    alert("Please answer the question."); 
    return; 
} 

Answer 2

Sie müssen nur das erforderliche Attribut für eine Eingabe der Radiogruppe festlegen, aber Sie können es für alle einstellen.

Zum Beispiel:

<form> 
 
    <label for="input1">1:</label> 
 
    <input type="radio" name="myradiogroup1" id="input1" value="1" required><br> 
 

 
    <label for="input2">2:</label> 
 
    <input type="radio" name="myradiogroup1" id="input2" value="2"><br> 
 

 
    <label for="input3">3:</label> 
 
    <input type="radio" name="myradiogroup1" id="input3" value="3"><br> 
 

 
    <input type="submit" value="send"> 
 
</form>