Check if at least one RADIO BUTTON has been checked

Question

I'm creating a dynamic form, there may be X fields to fill, for example there may be 10 inputs texts, 5 selects, 3 Radio etc.

I created the entire structure to assemble this form dynamically and it is working as expected.

However my biggest problem is when I will check if at least one RADIO BUTTON has been checked. If it were in a static way the solution would be simpler, as it could simply take the ID of the main DIV and see if one is checked

<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>

You don't need to pay much attention to the details of the code, because I gave a summary, just to explain that it is built dynamically

I needed to find some way of submitting the form to go through it all and check which are RADIOS from that individually enter each one and check if at least one is checked, if not add a message saying that the field is mandatory and I do this with the other RADIOS until passing through all.

Does anyone have any suggestions on what to do or some material that I can read?

score 0 · Answer 1 · answered Feb 10 '21 at 18:17

0

Do you try it with required? I think that for the front you don't need anything else

<label>
    <input type="radio" name="gender" value="male" required>
    Male
</label><br>

answered Feb 10 '21 at 18:17

Iromero

21
5

This way it works to block the submission of the form, but it shows a standard error message, I wanted something similar to what Google does, showing a "Mandatory Field" below each one – Fábio Santos Feb 10 '21 at 18:19
the controller takes care of that. The way it is usually done is, having a variable in the view that if it exists or is true shows an error message. Then from the backend if you see that it has not clicked on any one you reload that view passing it the variable in the way that it enters the condition of the error message – Iromero Feb 10 '21 at 18:37
something like this: https://stackoverflow.com/questions/10219278/php-show-error-messages-in-order-and-re-display-correct-fields – Iromero Feb 10 '21 at 18:37

score 0 · Accepted Answer · answered Feb 10 '21 at 20:40

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}`);
    }

  });

}

<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>

Check if at least one RADIO BUTTON has been checked

2 Answers2