How to make requiered for a specific button a set of HTML radios?

Question

For example, given these radios:

<input type="radio" value="1" name="1_1" required="">True</input>
<input type="radio" value="2" name="1_1" required="">False</input>

and this button (continue to the next page button):

<button type="button" class="d-block mr-0 ml-auto" onclick="return show('Page2','Page1');"> <b>Click here for going to the next page</b></button>

How can I force the user to select at least one radio, before pressing the button? That is, if the user do not select any of the radios, a legend appears saying he needs to answer at least one option? I tried to set the type of the button like this:

<input type="radio" value="1" name="1_1" required="button">True</input>
<input type="radio" value="2" name="1_1" required="button">False</input>

And include this script:

  function check(){
      var radios = document.getElementsByName("radio");

      for (var i = 0, len = radios.length; i < len; i++) {
           if (radios[i].checked) {
               return true;
           }
      }

      return false;
  }

However, both attempts are not working. Any idea about how to force the user to answer before pressing the continue button?

Does this answer your question? [checking if at least one radio button has been selected - JavaScript](https://stackoverflow.com/questions/13060313/checking-if-at-least-one-radio-button-has-been-selected-javascript) — ATP, Feb 16 '21 at 14:31
What made you think `required="button"` would make any sense to begin with? — CBroe, Feb 16 '21 at 14:31
@CBroe I do not know, I just want to make reference to that particular button. I have more and I want the user comple all the radios before clicking that particular button. — anon, Feb 16 '21 at 14:42
@DespinaKastani I am using the radios and button as in the question — anon, Feb 16 '21 at 14:44
[…] Well then the validation does not get triggered either, you would have to do that yourself then - https://stackoverflow.com/q/7002230/1427878 (But that would trigger validation of the whole form, so if you are trying to get some sort of tabbed form set up here, this will still require additional work.) — CBroe, Feb 16 '21 at 14:48

salvo · Accepted Answer · 2021-02-16T16:12:00.420

2

The problem can be solved with a few lines of javascript

<input type="radio" value="1" name="1_1" required onclick="enableButton()">True</input>
<input type="radio" value="2" name="1_1" required onclick="enableButton()">False</input>


<p><i>Please select an option to go to the next page</i></p>


<button type="button" id="button" class="d-block mr-0 ml-auto" disabled onclick="return show('Page2','Page1');"><b>Click here for going to the next page</b></button>

<script>
  function enableButton(target) {
    if (document.querySelector('input[name="1_1"]:checked') !== null) {
      document.getElementById('button').disabled = false;
    }
  }
</script>

edited Feb 16 '21 at 16:12

answered Feb 16 '21 at 15:24

salvo

93
6

Thanks for the help, one last thing, if I have 10 buttons and all of them are different, how should I adjust `querySelector` to cover all those cases? – anon Feb 16 '21 at 15:53
1

@anon, You can solve the 10-button issue by duplicating the script and using other radio-group `name` and button `id`. The best thing would be to have a single script written in a more elegant way, but you need to see your code to understand how the radio+button blocks are divided. – salvo Feb 16 '21 at 16:18

Despina Kastani · Answer 2 · 2021-02-16T14:54:19.687

1

It should be

<form id="testForm" onsubmit="return show('Page2','Page1');"> 
  <input type="radio" value="1" name="1_1" required>True</input>
  <input type="radio" value="2" name="1_1" required>False</input>

  <button type="submit" class="d-block mr-0 ml-auto"> <b>Click here for going to the next page</b></button>
</form>

edited Feb 16 '21 at 14:54

answered Feb 16 '21 at 14:40

Despina Kastani

832
5
11

Thanks for the help, the issue now is that my radios are between div tags, how can I force the form in this scenario? – anon Feb 16 '21 at 15:06
1

Have you tried what you are asking? It shouldn't matter as long as they are wrapped in a form. If for any reason this doesn't work (it should) you can always explicitly add the form attribute. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input – Despina Kastani Feb 17 '21 at 15:08

score 1 · Answer 3 · answered Feb 16 '21 at 14:54

1

You can put them in a form ,make button type submit and replace the onclick by onsubmit:

<form>
<input type="radio" value="1" name="1_1" required>True</input>
<input type="radio" value="2" name="1_1" required>False</input>
<button type="submit" onsubmit="return show('Page2','Page1');" class="d-block mr-0 ml-auto"> <b>Click here for going to the next page</b></button>
</form>

See this question to stop refreshing on submit.

answered Feb 16 '21 at 14:54

ATP

2,939
4
13
34

Thanks for the help, however, I guess this is not working because all my elements are wrapped inside a div, any idea of how to include them into the form? – anon Feb 16 '21 at 15:04
1

@anon You can put the div inside the form – ATP Feb 16 '21 at 15:07
This is how it looks: `
– anon Feb 16 '21 at 15:17
1

divs don't accept an `onsubmit` attribute. This should remain in the form – Despina Kastani Feb 17 '21 at 15:09

How to make requiered for a specific button a set of HTML radios?

3 Answers3