2

Estou criando um formulário dinâmico, nele podem existir X campos para preencher, por exemplo podem existir 10 inputs texts, 5 selects, 3 Radio etc

Criei toda a estrutura para montar esse formulário de maneira dinâmica e está funcionando da maneira esperada.

Porém o meu maior problema é quando vou verificar se pelo menos um RADIO BUTTON foi checado. Se ele fosse de maneira estática a solução seria mais simples, pois simplesmente poderia pegar pelo ID da DIV principal e ver se uma está checada

<div id="$id">
 <?php for($i = $inicio; $i <= $fim; $i++){ ?>
   <label>
    <input  
     id="<?= $id ?>"    
     name="<?= $name ?>"
     value="<?= $i ?>" 
     type="radio"
   />
   <span><?= $i ?></span>
  </label>                                                 
<?php } ?>
</div>

Não precisam se atentar muito aos detalhes do código, pois dei uma resumida, só para explicitar que ele é construído dinamicamente

Precisava encontrar alguma forma de ao submeter o formulário percorrer todo ele e verificar quais são RADIOS a partir disso de forma individual entrar em cada um e verificar se pelo menos um está checado, se não estiver adiciono uma mensagem falando que o campo é obrigatório e faço isso com os demais RADIOS até passar por todos.

Alguém tem alguma sugestão do que fazer ou algum material que eu possa dar uma lida?

Como fica o HTML construído com aquele for

<form action="X">
    <div>
        <p>Pergunta 1</p>
        <div id="1">
            <label for="">
                <input type="radio" name="1" value="1" id="1">
                <span>1</span>
            </label>
            <label for="">
                <input type="radio" name="1" value="2" id="1">
                <span>2</span>
            </label>
            <label for="">
                <input type="radio" name="1" value="3" id="1">
                <span>3</span>
            </label>
        </div>
    </div>
    <div>
     <p>Pergunta 2</p>
     <div id="2">
        <label for="">
            <input type="radio" name="2" value="1" id="2">
            <span>1</span>
        </label>
        <label for="">
            <input type="radio" name="2" value="2" id="2">
            <span>2</span>
        </label>
        <label for="">
            <input type="radio" name="2" value="3" id="2">
            <span>3</span>
        </label>
    </div>
 </div>
 <button type="submit">Enviar</button>
 </form>
6
  • os radios precisam estar agrupados por nome, eles tem nomes variáveis? 10/02/2021 às 18:10
  • @RicardoPontual os radios de cada pergunta tem o mesmo name, se existir outra pergunta ele vai ter um name diferente para o radios 10/02/2021 às 18:17
  • entendi. isso seria simples, a resposta do isaque já da um exemplo, mas se tiver "grupos" com nomes diferentes, precisa de uma lógica, por exemplo <div id="1">.. alguns radio</div><div id="2"> outros radio </div>..., acontece isso? 10/02/2021 às 18:21
  • @RicardoPontual sim, ele está dessa forma. Existe uma DIV com a pergunta e várias possíveis respostas que são os radios, depois podem existir mais X DIVs com perguntas e respostas, eles tem o mesmo modelo, porém seu id e name são diferentes 10/02/2021 às 18:24
  • já entendi, pode colocar um pequeno exemplo do html, com mais de um div com respostas? 10/02/2021 às 18:31

1 Resposta 1

1

Você poda usar o jQuery com um seletor que seleciona todos os radios checados e verificar se o length é maior que 0:

    function checarRespostas() {

      var perguntas = $('[id^=pergunta]');
      perguntas.each((index, pergunta) => {
        var respostasChecadas = $(pergunta).children('label').children('input[type=radio]:checked');

        if (respostasChecadas.length == 0) {
          alert(`Responda a ${pergunta.id}`);
        }

      });

    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <p>Pergunta 1</p>
    <div id="pergunta_1">
        <label>
            <input type="radio" name="resposta_1" value="Opcao1"> Opção 1
            <br>
            <input type="radio" name="resposta_1" value="Opcao2"> Opção 2
        </label>
    </div>

    <p>Pergunta 2</p>
    <div id="pergunta_2">
        <label>
            <input type="radio" name="resposta_2" value="Opcao1"> Opção 1
            <br>
            <input type="radio" name="resposta_2" value="Opcao2"> Opção 2
        </label>
    </div>
    <br>

    <button onclick="checarRespostas()">Enviar</button>

O length será 0 caso nenhum radio checado for encontrado.

Veja: seletor :checked

6
  • .Sim, dessa forma eu confirmo se pelo menos um está checado, porém para o formulário todo e não individualmente, porém podem existir vários perguntas com opção de radio, preciso ver em cada uma delas se pelo menos um foi checado, caso tenha sido passo para o próximo e refaço o processo, se eu encontrar uma pergunta que não tem uma opção marcada exibo uma mensagem naquela pergunta falando que é obrigatória 10/02/2021 às 18:12
  • pelo que entendi as divs ou outros elementos podem ser as perguntas, e cada uma contém radio buttons em que pelo menos um radio button por pergunta deve estar checado, isso?
    – isaque
    10/02/2021 às 18:19
  • Exatamente isso, existe uma DIV principal que contém a pergunta e as possíveis respostas para ela são radio buttons, ao enviar o formulário eu queria percorrer elas e verificar se todas estão checadas, colocando uma mensagem de campo obrigatório nas que não estejam 10/02/2021 às 18:21
  • @FábioSantos mas existe algo que possibilite identificar as divs como perguntas? (Por exemplo, alguma classe de css ou algum id como pergunta_X)
    – isaque
    10/02/2021 às 18:24
  • sim todas as perguntas tem seu próprio ID 10/02/2021 às 18:26

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .