How to validate multiple inputs of a survey using pure JS?

Asked

Viewed 516 times

-1

Just as it is specified in the p tag below as I should follow to validate so many inputs ?

<!DOCTYPE html> <html lang="en"> <head>
    <meta charset="UTF-8">
    <title>Exercicio-4</title> </head> <body>
    <p>
        Crie um formulário com 10 questões de verdadeiro ou falso. O usuário deve preencher um formulário com as questões
        , cada questão deve ter dois radio buttons com as respostas possíveis. Ao final do formulário deve existir um bo
        tão enviar. Ao clicar no botão deve-se validar as questões, para cada resposta preenchida corretamente deve-se so
        mar 1 ponto, para cada resposta errada ou em branco deve-se somar 0 pontos, e então apresentar a pontuação ao us
        uário.
    </p>
    <form action="">
        <fieldset>
            <p>O sol é verdadeiramente amarelo ?</p>
            <input type="radio" name="resposta" value="op1" class="teste">Sim
            <input type="radio" name="resposta" value="op2" class="teste">Não

            <p>Um raio pode derrubar um avião ?</p>
            <input type="radio" name="respostaUm" value="op1">Sim
            <input type="radio" name="respostaUm" value="op2">Não

            <p>A chuva faz a internet ficar mais lenta ?</p>
            <input type="radio" name="respostaDois" value="op1">Sim
            <input type="radio" name="respostaDois" value="op2">Não

            <p>Se houvesse guerras no espaço, como em Star Wars, o barulho de tiros seriam ouvidos?</p>
            <input type="radio" name="respostaTres" value="op1">Sim
            <input type="radio" name="respostaTres" value="op2">Não

            <p>Cd's piratas podem danificar seu aparelho ?</p>
            <input type="radio" name="respostaQuatro" value="op1">Sim
            <input type="radio" name="respostaQuatro" value="op2">Não

            <p>A formula da coca NUNCA foi descober ?</p>
            <input type="radio" name="respostaCinco" value="op1">Sim
            <input type="radio" name="respostaCinco" value="op2">Não

            <p>Os kamikazes usavam capacetes ?</p>
            <input type="radio" name="respostaSeis" value="op1">Sim
            <input type="radio" name="respostaSeis" value="op2">Não

            <p>Bucky Barnes (Capitão América : guerra civil) nunca existiu nos quadrinhos !</p>
            <input type="radio" name="respostaSete" value="op1">Sim
            <input type="radio" name="respostaSete" value="op2">Não

            <p>Uno é um jogo pacífico !</p>
            <input type="radio" name="respostaOito" value="op1">Sim
            <input type="radio" name="respostaOito" value="op2">Não

            <p>Homem aranha é o melhor heroi da Marvel ?</p>
            <input type="radio" name="respostaNove" value="op1">Sim
            <input type="radio" name="respostaNove" value="op2">Não <br> <br>


            <button onclick="validarRespostas()">Validar Respostas</button>

        </fieldset>
    </form>
    <script src="JS/javaScript.js"></script> </body> </html>
javascript html5

1 answer

1


  1. check if it has been marked ex: document.querySelector('input[name = resposta]:checked')
  2. Recover the marked value document.querySelector('input[name = resposta]:checked').value
  3. Check if it matches the right answer document.querySelector('input[name = respostaUm]:checked').value=="op1"
  4. If yes add 1 the total variable total =total+1;

function validarRespostas(){

var total=0;

    if (document.querySelector('input[name = resposta]:checked')){
    if (document.querySelector('input[name = resposta]:checked').value=="op1"){
    total =total+1;
    }
    }    
    
    if (document.querySelector('input[name = respostaUm]:checked')){
    if (document.querySelector('input[name = respostaUm]:checked').value=="op1"){
    total =total+1;
    }
    }
    
    if (document.querySelector('input[name = respostaDois]:checked')){
    if (document.querySelector('input[name = respostaDois]:checked').value=="op1"){
    total =total+1;
    }
    }

    if (document.querySelector('input[name = respostaTres]:checked')){
    if (document.querySelector('input[name = respostaTres]:checked').value=="op1"){
    total =total+1;
    }
    }

    if (document.querySelector('input[name = respostaQuatro]:checked')){
    if (document.querySelector('input[name = respostaQuatro]:checked').value=="op1"){
    total =total+1;
    }
    }

    if (document.querySelector('input[name = respostaCinco]:checked')){
    if (document.querySelector('input[name = respostaCinco]:checked').value=="op1"){
    total =total+1;
    }
    }

    if (document.querySelector('input[name = respostaSeis]:checked')){
    if (document.querySelector('input[name = respostaSeis]:checked').value=="op1"){
    total =total+1;
    }
    }
    
    if (document.querySelector('input[name = respostaSete]:checked')){
    if (document.querySelector('input[name = respostaSete]:checked').value=="op1"){
    total =total+1;
    }
    }    
    
    if (document.querySelector('input[name = respostaOito]:checked')){
    if (document.querySelector('input[name = respostaOito]:checked').value=="op1"){
    total =total+1;
    }
    }    
    
    if (document.querySelector('input[name = respostaNove]:checked')){
    if (document.querySelector('input[name = respostaNove]:checked').value=="op1"){
    total =total+1;
    }
    }    
    console.log(total);
}
<fieldset>
            <p>O sol é verdadeiramente amarelo ?</p>
            <input type="radio" name="resposta" value="op1" class="teste">Sim
            <input type="radio" name="resposta" value="op2" class="teste">Não

            <p>Um raio pode derrubar um avião ?</p>
            <input type="radio" name="respostaUm" value="op1">Sim
            <input type="radio" name="respostaUm" value="op2">Não

            <p>A chuva faz a internet ficar mais lenta ?</p>
            <input type="radio" name="respostaDois" value="op1">Sim
            <input type="radio" name="respostaDois" value="op2">Não

            <p>Se houvesse guerras no espaço, como em Star Wars, o barulho de tiros seriam ouvidos?</p>
            <input type="radio" name="respostaTres" value="op1">Sim
            <input type="radio" name="respostaTres" value="op2">Não

            <p>Cd's piratas podem danificar seu aparelho ?</p>
            <input type="radio" name="respostaQuatro" value="op1">Sim
            <input type="radio" name="respostaQuatro" value="op2">Não

            <p>A formula da coca NUNCA foi descober ?</p>
            <input type="radio" name="respostaCinco" value="op1">Sim
            <input type="radio" name="respostaCinco" value="op2">Não

            <p>Os kamikazes usavam capacetes ?</p>
            <input type="radio" name="respostaSeis" value="op1">Sim
            <input type="radio" name="respostaSeis" value="op2">Não

            <p>Bucky Barnes (Capitão América : guerra civil) nunca existiu nos quadrinhos !</p>
            <input type="radio" name="respostaSete" value="op1">Sim
            <input type="radio" name="respostaSete" value="op2">Não

            <p>Uno é um jogo pacífico !</p>
            <input type="radio" name="respostaOito" value="op1">Sim
            <input type="radio" name="respostaOito" value="op2">Não

            <p>Homem aranha é o melhor heroi da Marvel ?</p>
            <input type="radio" name="respostaNove" value="op1">Sim
            <input type="radio" name="respostaNove" value="op2">Não <br> <br>


            <button onclick="validarRespostas()">Validar Respostas</button>

        </fieldset>

Browser other questions tagged javascript html5

You are not signed in. Login or sign up in order to post.