Validar resposta do tipo radio

Galera preciso de uma ajudar para que quando o usuario for responder o quiz e não selecionar uma resposta dar um alert que fala “Selecione ao menos uma resposta”

  <body>
        <h1 id="titulo">Quizz Game Of Thrones</h1>
        <hr>
        <div id = "container">
            <section id = "perguntas">
                <h2>Pergunta 1 de 10</h2>
                <h2 id="nr_pergunta">Qual o nome dos três dragões de Daenerys Targaryen?</h2>
                <ul>
                    <li>
                        <input name="alternativa" id="resp1" class="alt_certa" type="radio">
                        <label for="resp1">Drogon, Viserion e Rhaegal</label>

                    </li>
                    <li>
                        <input name="alternativa" id="resp2" type="radio">
                        <label for="resp2">Rhaego, Viserys e Drogo.</label>

                    </li>
                    <li>
                        <input name="alternativa" id="resp3" type="radio">
                        <label for="resp3">Drogon, Viserys e Aegon.</label>

                    </li>
                </ul>

            <button id="volta">Voltar</button>
            <button id="avanca">Avançar</button>

            </section>
        </div>
    </body>

var perguntas_vet = [    
    {id_perg: 1, pergunta: 'Qual o nome dos três dragões de Daenerys Targaryen? ', alt1: 'Drogon, Viserion e Rhaegal', alt2:'Drogon, Viserys e Aegon.', alt3:'Rhaego, Viserys e Drogo.'}, 
    
    {id_perg: 2, pergunta: 'Qual o nome da espada dada a Jon Snow, pelo comandante da patrulha da noite?', alt1:'Garralonga', alt2:'Luminífera', alt3: 'Fantasma'}, 
    
    {id_perg: 3, pergunta: 'Qual o lema, em inglês, da casa Arryn?', alt1:'Family, Duty, Honor', alt2:'As High As Honor', alt3:'Our Blades are Sharp'}, 
    
    {id_perg: 4, pergunta: 'Quem foi o primeiro a se sentar no trono após a morte do Rei Louco?', alt1: 'Jaime Lannister', alt2:'Robert Baratheon', alt3: 'Ned Stark'},
    
    {id_perg: 5, pergunta: 'Qual o nome da espada de Arya, recebida por Jon Snow?', alt1:'Nymeria', alt2:'Agulha', alt3: 'Lady'}, 
    
    {id_perg:6, pergunta:'Quem foi que matou Jon Arryn?', alt1:'Lysa Arryn', alt2:'Joffrey Baratheon', alt3: 'Cersei Lannister'},
    
    {id_perg: 7, pergunta: 'Qual foi o adjetivo dado ao primeiro Targaryen a se tornar rei de Westeros?', alt1: 'Aegon, o Libertador', alt2: 'Aegon, o Dragão', alt3: 'Aegon, o Conquistador'},
    
    {id_perg: 8, pergunta: 'Por que Robert se tornou rei após a morte do Rei louco?', alt1:'Por ser ele quem matou o Príncipe Rhaegar, que era reconhecido como um dos maiores cavaleiros do reino.', alt2: 'Devido a ter uma ligação sanguínea com os Targaryen, a sua reivindicação ao trono era maior do que os outros participantes da rebelião.', alt3: 'Por seus grandes feitos em batalha, que o fez cativar diversas pessoas, e até mesmo a transformar antigos inimigos em aliados.'}, 
    
    {id_perg: 9, pergunta: 'Quais são os poderes de Bran Stark?', alt1: 'Vidente verde', alt2: 'Warg', alt3: 'Warg e Vidente verde'},
    
    {id_perg: 10, pergunta: 'Qual a música tocada no Casamento Vermelho, que alertou a todos a iniciar o massacre?', alt1: 'Winter has come', alt2: 'The Rains of Castamere', alt3: 'The North Remembers'}];

var resposta_usuario = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0,];
var resposta_gabarito = ["resp1", "resp1", "resp2", "resp1", "resp2", "resp1", "resp3", "resp2", "resp3", "resp2"];
var pontuacao = 0, fim, resp1, resp2, resp3, avanca, volta, pergutnas, nr_pergunta, cont = 0, finaliza;
window.onload = padrao;
function padrao (){
    
    resp1 = document.getElementById("resp1");
    resp2 = document.getElementById("resp2");
    resp3 = document.getElementById("resp3");
    perguntas = document.getElementById("perguntas");   
    avanca = document.getElementById("avanca");
    volta = document.getElementById("volta");
    resp1.onclick = selecionaResp;
    resp2.onclick = selecionaResp;
    resp3.onclick = selecionaResp;
    avanca.onclick = mostraPerguntas;
    volta.onclick = mostraPerguntas; 
    
}

function selecionaResp(){
    resposta_usuario[cont] = event.target.id;
}

function corrigeResp(){
        if (confirm("Tem certeza que deseja finalizar a tentativa?") == true){
            perguntas.innerHTML = ""
            for (var i =0; i<resposta_usuario.length;i++){
                if(resposta_gabarito[i]==resposta_usuario[i]){
                    pontuacao +=1;
                    perguntas.insertAdjacentHTML('afterbegin', "<p>Pergunta "+(i+1)+" Correta!</p>");
                }
            
                else if (resposta_gabarito[i]!=resposta_usuario[i]){
                    perguntas.insertAdjacentHTML('afterbegin', "<p>Pergunta "+(i+1)+" Incorreta!</p>");
                }
            }

        perguntas.insertAdjacentHTML('afterbegin', "<h3>Pontuação: "+pontuacao+" de 10</h3>");
        }
    
}
    





function mostraPerguntas(){
    if(event.target.id=="avanca") cont++;
    else cont--;
    if(cont == perguntas_vet.length) cont = 0;
    if(cont < 0)cont = perguntas_vet.length -1;
    
    perguntas.innerHTML = '<h2 id="nr_pergunta">Perunta: '+(cont+1)+ ' de 10</h2>' +
                          '<h2 id="ti_pergunta">'+(perguntas_vet[cont].pergunta)+ '</h2>' +
                          '<ul>'+
                          '<li><input name="alternativa" id="resp1" type="radio"><label for="resp1">'+ (perguntas_vet[cont].alt1)+'</label></li>'+
                          '<li><input name="alternativa" id="resp2" type="radio"><label for="resp2">'+ (perguntas_vet[cont].alt2)+'</label></li>'+ 
                          '<li><input name="alternativa" id="resp3" type="radio"><label for="resp3">'+ (perguntas_vet[cont].alt3)+'</label></li>'+
                          '</ul>'+
                          '<button id="volta">Voltar</button>'+
                          '<button id="avanca">Avancar</button>';
    if (cont==9){
        perguntas.insertAdjacentHTML('beforeend', '<button id="finaliza">Finalizar tentativa</button>')
        finaliza = document.getElementById("finaliza");
        finaliza.onclick = corrigeResp;
        
    }
    
                          
    resp1 = document.getElementById("resp1");
    resp2 = document.getElementById("resp2");
    resp3 = document.getElementById("resp3");
    perguntas = document.getElementById("perguntas");   
    avanca = document.getElementById("avanca");
    volta = document.getElementById("volta");
    finaliza = document.getElementById("finaliza");
    resp1.onclick = selecionaResp;
    resp2.onclick = selecionaResp;
    resp3.onclick = selecionaResp;
    avanca.onclick = mostraPerguntas;
    volta.onclick = mostraPerguntas;
                          
}

Use querySelectorAll…

var alternativas = document.querySelectorAll("input[name=alternativa]:checked");

if (alternativas.length < 1) {
    alert("Selecione ao menos uma resposta");
}

Algo nesse sentido…

cara tentei aqui, mas não foi ele coloca esse alert na pagina index =/

ae galera ainda não consegui alguem pode me ajudar?

Mas cade o código que voce tentou pra verificar o que falta?

foi o codigo do rodevops que ele passou

Não entendi, onde vc quer que ele coloque o alerta? Esse código todo que vc passou não é onde deveria ser a verificação (mesma página)?

A dica que o @rodevops passou funciona, se voce aplicou corretamente no seu projeto sao outros quinhentos…
Sem voce mostrar o código que fez nao tem como adivinharmos o que precisa ajustar.

1 curtida

eu só quero que ele não deixe pular para a proxima pagina se a pessoa não selecionou nenhuma das respostas abaixo, isso nas 10 perguntas não sei se é validar isso ou não mas tipo quero que ele não deixe clicar no botao “avancar” para a proxima pergunta se ele não selecionou nada, e quando ele nao selecionar dar um alert “precisa selecionar ao menos uma”

O if que ele exemplificou a partir do selector permite isso. O resto do código você deve postar pra identificarem o que tem de errado.

tentei esse codigo aqui

<div id = "container" name ="div1">
<button id="avanca" onfocus="return validar()">Avançar</button>
	
function validar() {
	if((div1.alternativa[0].checked == false)&&(div1.alternativa[1].checked == false)&&(div1.alternativa[2].checked == false)){
		alert('Informe ao menos uma resposta.');
		div1.alternativa[0].focus();
		return false;
	}
	return true;
}

Voce nao seguiu a dica que ele passou, está totalmente diferente. Com a dica dele, basta colocar prosseguir na sua lógica do return.

sim a primeira eu segui a dica dele, depois eu vi uma video aula no youtube o do cara deu certo mas o meu não

Com a dica dele, basta colocar prosseguir na sua lógica do return.

eu não entendi

Veja o exemplo do @rodevops sendo aplicado corretamente:

https://jsfiddle.net/cuzhw6ta/

1 curtida

javaflex nesse

    else {
	//resto do codigo pra avancar pagina...
  window.location.href = "https://jsfiddle.net/about";
}

eu teria que colocar a localizacao da pagina do “resultado.html”?

Pode ser, foi só um exemplo, tem várias formas, achei que já estivesse fazendo isso já que sua dúvida era sobre como validar.

entao coloquei a location no final mas ele não avanca para a pergunta 2, ele apenas pula para pagina do resultado, ou quando eu tiro a localizacao ele fica no loop da pergunta 1, como posso resolver isso?

E cade seu código pra alguem poder reproduzir o problema?

Vamos la, alguns conceitos básicos de html, todo button precisa ter um type definido senão o padrão é submit, isso quer dizer que se for clicado não vai respeitar return de função nenhuma, logo…

<button type="button"...>

“Congela o form” e sem onclick chamando função vira um botão “morto” e é perfeito para o que vc quer porque te dá controle total se vai ou não enviar o formulário pegou?

Outra coisa, para o que vc quer funcionar corretamente vc precisa colocar a função validar no form e não no botão…

Se vc quiser usar o return conforme vc tava querendo pode ser por form…

<form name="meuForm" onsubmit="return validar()">
   ...
</form>

O resto da função não precisaria mudar porque tem um return true ou false bonitinho conforme vc colocou…

Porém eu prefiro outra alternativa, mais segura e evita submit “hackeado”…

<form name="meuForm">
...alternativas...
   <input type="button" onclick="validar();" value="Avançar">
</form>

Depois na função:

function validar() {
    var alternativas = document.querySelectorAll("input[name=alternativa]:checked");

    if (alternativas.length < 1) {
        alert("Informe ao menos uma resposta");
    } else {
        document.meuForm.submit(); //ha, pegadinha do malandro!
    }
}

Vai brincando, js puro não é um bicho de 7 cabeças, vai vendo cada detalhe que coloquei, o name no form, o modo como fiz a validação com um unico if sem ter && ou || etc além das formas diferentes de fazer (onsubmit no form ou onclick no button)… cada um tem sua lógica e tentei te mostrar a forma mais simples e que eu faria, vai trilhando a sua, bons estudos!