How to check if one or more checkbox in form is selected (only when div is displayed)

Question

I need help to validate a form on submit. It should check that one of more checkboxes are selected or else display error message. I have currently got it working but the problem is the checkbox option is displayed after selecting a radio button on the form.

The code I have now still shows an error message even if the div isn't displayed which is a big issue as users haven't seen the checkbox option.

I want the checkbox error message to show ONLY if the user has selected the radio button "NO" and therefor is required to check a checkbox. If they select the radio button "YES" and this checkbox div is not displayed, then I don't want the error message on submit.

function hide() {
  document.getElementById('hidden').style.display ='none';
}
function show() {
  document.getElementById('hidden').style.display = 'block';
}

function validateForm() {
  var checked = false;
  var elements = document.getElementsByName("tick");
  for (var i = 0; i < elements.length; i++) {
    if (elements[i].checked) {
      checked = true;
    }
  }
  if (!checked) {
    alert('You must select why you are attending!');
  }
  return checked;
}

<form id="form" method="post" enctype="text/plain" name="vform">

  <p>This course is identified in my Work Plan and Learning Agreement</p>
  <input type="radio" name="optionOne" value="yes" onclick="hide()" required> Yes<br>
  <input type="radio" id="chk" name="optionOne" value="no" onclick="show()"> No<br>

  <p>
    <div id="hidden" style="display: none">
      <p>I am attending this session because (tick all that apply) </p>
      <input type="checkbox" name="tick" value="selectone"> It will help me develop the skills and knowledge required for my current role<br>
      <input type="checkbox" name="tick" value="selecttwo"> It will help me develop the skills and knowledge for a possible future role/body of work <br>
      <input type="checkbox" name="tick" value="selectthree"> It was identified as a need during my performance management discussions<br>
      <input type="checkbox" name="tick" value="selectfour"> My manager recommended that I attend<br>
      <input type="checkbox" name="tick" value="selectfive"> I am interested in the content<br>
      <p>

        <p>What would you like to achieve as a result of your attendance? For example, "I would like to learn to write better emails to improve my communication skills." </p>
        <input type="text" id="results" name="results">
    </div>

    <div class="submit-button">
      <button type="submit" name="submit" onclick="validateForm()" value="send">Submit</button>
    </div>

</form>

where I have my input type as checkbox, in the div id "hidden" — Bonnie Thompson, May 13 '19 at 17:08

Kamil Kiełczewski · Answer 1 · 2019-05-13T17:51:58.547

try (select "No" below)

function validateForm(e) {
    let inp=[...document.getElementsByName("tick")];
    if(!inp.some(i=>i.checked) && chk.checked) {
      e.preventDefault();
      alert('You must select why you are attending!');
    }
}

function validateForm(e) {
    let inp=[...document.getElementsByName("tick")];
    if(!inp.some(i=>i.checked) && chk.checked) {
      e.preventDefault();
      alert('You must select why you are attending!');
    }
}

// DISPLAY HIDDEN TEXT
function hide() {
  document.getElementById('hidden').style.display ='none';
}
function show() {
  document.getElementById('hidden').style.display = 'block';
}

<form id="form" method="post" enctype="text/plain" name="form">

      <p>This course is identified in my Work Plan and Learning Agreement</p>
      <input type="radio" name="optionOne" value="yes" onclick="hide()" required> Yes<br>
      <input type="radio" id="chk" name="optionOne" value="no" onclick="show()"> No<br>

      <p>
        <div id="hidden" style="display: none">
          <p>I am attending this session because (tick all that apply) </p>
          <input  type="checkbox" name="tick" value="selectone"> It will help me develop the skills and knowledge required for my current role<br>
          <input  type="checkbox" name="tick" value="selecttwo"> It will help me develop the skills and knowledge for a possible future role/body of work <br>
          <input  type="checkbox" name="tick" value="selectthree"> It was identified as a need during my performance management discussions<br>
          <input  type="checkbox" name="tick" value="selectfour"> My manager recommended that I attend<br>
          <input  type="checkbox" name="tick" value="selectfive"> I am interested in the content<br>
          <p>

            <p>What would you like to achieve as a result of your attendance? For example, "I would like to learn to write better emails to improve my communication skills." </p>
            <input type="text" id="results" name="results">
        </div>

        <div class="submit-button">
          <button type="submit"  onclick="validateForm(event)" name="submit" value="send">Submit</button>
        </div>

    </form>

Using required means the user has to select every checkbox. I want to check for one or more. Thank you though — Bonnie Thompson, May 13 '19 at 17:07
It would be useful to explain how your code works and why the OP's didn't. — j08691, May 13 '19 at 17:32
we use event `preventDefault` to not allow send form in case it is invalid. We also use array `some` to check that some checkbox is checked. We also use `spread syntax` to conver getElementsByName node list to array. — Kamil Kiełczewski, May 13 '19 at 17:34
Thanks for the code but what I need help with is to only show the error message if the radio button "no" is selected (thus displaying the checkboxes), otherwise the div remains hidden and no error message occurs if no checkbox is selected. — Bonnie Thompson, May 13 '19 at 17:39
@KamilKiełczewski I have another question... I have a text input that is required but should only be required if the div is shown (similar to the previous question). Im not sure how to do it..

Please provide details of your requirments. — Bonnie Thompson, May 16 '19 at 05:57

score 1 · Accepted Answer · answered May 13 '19 at 18:18

Here's the old school way. Just check the display attribute of the div, and only set your flag to false inside that.

function validateForm() {
    var checked;
    if(document.getElementById("hidden").style.display == "block") {
        checked = false;
        var elements = document.getElementsByName("tick");
        for (var i=0; i < elements.length; i++) {
            if (elements[i].checked) {
                checked = true;
            }
        }
    }

    if (checked===false) {
        alert('You must select why you are attending!');
    }
    return checked;
}

How to check if one or more checkbox in form is selected (only when div is displayed)

2 Answers2