Как проверить, установлен ли один или несколько флажков в форме (только когда отображается div)

Question

Мне нужна помощь для подтверждения формы при отправке. Следует проверить, установлен ли один из нескольких флажков, или же отображается сообщение об ошибке. В настоящее время он работает, но проблема в том, что опция флажка отображается после выбора переключателя в форме.

В коде, который у меня есть, по-прежнему отображается сообщение об ошибке, даже если div не отображается, что является большой проблемой, поскольку пользователи не видели флажок.

Я хочу, чтобы сообщение об ошибке флажка отображалось ТОЛЬКО в том случае, если пользователь установил переключатель «НЕТ» и для этого необходимо установить флажок. Если они выбирают переключатель «ДА» и этот флажок div не отображается, то я не хочу сообщение об ошибке при отправке.

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>

Answer 1

try (выберите «Нет» ниже)

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>

Answer 2

Вот старый школьный путь. Просто проверьте атрибут отображения div и установите для этого флага только false.

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