How to validate multiple Inputs of a questionnaire using pure JS?

Question

How to validate multiple Inputs of a questionnaire using pure JS?

Navigation

#1 by (1 votes)

0

As specified in the below p tag how should I go about validating 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

asked by anonymous 27.03.2018 / 03:04

1 answer

HTML TEMPLATE tag for code block repeats Access - Update on table without using VBA module

score 1 · Accepted Answer

check if ex: document.querySelector('input[name = resposta]:checked')

Retrieve the value marked document.querySelector('input[name = resposta]:checked').value

Verify that the correct answer matches document.querySelector('input[name = respostaUm]:checked').value=="op1"

If affirmative add 1 to 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>