Как я проверяю "textarea" после того, как флажок проверен с javascript

Question

Я сделал форму с несколькими вопросами.Каждый вопрос имеет флажки или переключатели, в зависимости от типа вопроса (сколько может быть ответов).

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

Я не уверен, как создать функцию проверки, которая будет запускать , только если выбран определенный ответ (установлен определенный флажок, будет запускать функцию проверки на наличие текстовой области)и проверьте его содержимое).

Код, который я получил до сих пор, можно найти здесь .

Код также доступен ниже:

// main function for checking the validation of answer 
function Validation() {
  if(!ValidateForm()) {
    document.getElementById("errorBox").innerHTML = "Please check that you correctly answered the question";
    return false;
  } else {
    document.getElementById("errorBox").innerHTML = "";
    return true					
  }
}

// will check the checkbox to see if checked,
// the "console.log" is there just because of previous problems, don't mind it
function ValidateForm() {
  var k = document.getElementsByName('Knowledge');
							
  for (var l = 0; l<k.length; l++) {
    if (k[l].checked) {
      console.log(k[l])
      return true;										
    }
  }
}

// this was supposed to be the code to do the following:
//  if the checkbox is checked, it would check for textarea
//  if the textarea is there, check if it has any content
//    if not, return false ---> sends message from the main function
var k = document.getElementsByName('Knowledge');
						
for(var i = 0; i<k.length; i++) {
  if (k[6].checked) {
								
  }					
}

<form id="frmForm" name="frmForm" action="#" method="post" onsubmit="return Validation()">
  <div class="row" style="margin-top: 20px;">
    <div class="col-sm-12">
      <div class="form-group">
        <p>
        <b>3. This is a question, Lorem ipsum dolor sit amet?</b>
        </p>
        <p style="margin-left: 16px;">
          (please choose one or more answers to continue)
        </p>
        <div style="margin-left: 35px;">
          <input type="checkbox" id="Knowledge1" name="Knowledge" value="physical" >
            <label for="Knowledge1" style="font-weight:normal">answer 1<br>
          <input type="checkbox" id="Knowledge2" name="Knowledge" value="music" >
            <label for="Knowledge2" style="font-weight:normal">answer 2<br>
          <input type="checkbox" id="Knowledge3" name="Knowledge" value="nature" >
            <label for="Knowledge3" style="font-weight:normal">answer 3</label><br>
          <input type="checkbox" id="Knowledge4" name="Knowledge" value="society" >
            <label for="Knowledge4" style="font-weight:normal">answer 4</label><br>
          <input type="checkbox" id="Knowledge5" name="Knowledge" value="other" >
            <label for="Knowledge5" style="font-weight:normal">answer 5 + explain
          <input type="text" placeholder=" . . ." border=""/></label><br>
        </div>
      </div>
    </div>
  </div>

  <div class="row" style="margin-top: 50px">
    <div class="col-sm-3 col-sm-offset-3">
      <div class="form-group">
        <button type="submit" id="Submit" name="Submit" class="btn btn-default">! ANSWER !</button>
      </div>
    </div>
  </div>
					
  <div id="errorBox" style="margin-bottom:50px; color: red"></div>
      
</form>     
  

Answer 1

Если вы хотите сохранить его универсальным, добавьте атрибут данных к флажкам, для которых требуется дополнительный текст, и проверьте, проверяет ли этот атрибут данных:

<input type="checkbox" id="Knowledge5" name="Knowledge" value="other" data-explain="Knowledge5text">
<input id="Knowledge5text" type="text" placeholder="..." border=""/>

.

if (checkboxElement.dataset.explain) {
  console.log('answer requires an explanation');
  var textFieldElement = document.getElementById(k[i].dataset.explain);
  if (!textFieldElement .value) {
    console.log('no answer found:', textFieldElement .value);
    return false;
  }
}

Вот полный пример.Примечание: избегайте односимвольных имен переменных для всего, кроме переменных цикла, это усложняет понимание кода

// main function for checking the validation of answer 
function Validation() {
  if(!ValidateForm()) {
    document.getElementById("errorBox").innerHTML = "Please check that you correctly answered the question";
    return false;
  } else {
    document.getElementById("errorBox").innerHTML = "";
    return true					
  }
}

// will check the checkbox to see if checked,
// the "console.log" is there just because of previous problems, don't mind it
function ValidateForm() {
  var k = document.getElementsByName('Knowledge');

  for (var i = 0; i < k.length; i++) {
    if (k[i].checked) {
      if (k[i].dataset.explain) {
        console.log('answer requires an explanation');
        var textField = document.getElementById(k[i].dataset.explain);
        if (!textField.value) {
          console.log('no answer found:', textField.value);
          return false;
        }
      }
      return true;										
    }
  }
}

<form id="frmForm" name="frmForm" action="#" method="post" onsubmit="return Validation()">
  <div class="row" style="margin-top: 20px;">
    <div class="col-sm-12">
      <div class="form-group">
        <p>
        <b>3. This is a question, Lorem ipsum dolor sit amet?</b>
        </p>
        <p style="margin-left: 16px;">
          (please choose one or more answers to continue)
        </p>
        <div style="margin-left: 35px;">
          <input type="checkbox" id="Knowledge1" name="Knowledge" value="physical" >
            <label for="Knowledge1" style="font-weight:normal">answer 1<br>
          <input type="checkbox" id="Knowledge2" name="Knowledge" value="music" >
            <label for="Knowledge2" style="font-weight:normal">answer 2<br>
          <input type="checkbox" id="Knowledge3" name="Knowledge" value="nature" >
            <label for="Knowledge3" style="font-weight:normal">answer 3</label><br>
          <input type="checkbox" id="Knowledge4" name="Knowledge" value="society" >
            <label for="Knowledge4" style="font-weight:normal">answer 4</label><br>
          <input type="checkbox" id="Knowledge5" name="Knowledge" value="other" data-explain="Knowledge5text">
            <label for="Knowledge5" style="font-weight:normal">answer 5 + explain
          <input id="Knowledge5text" type="text" placeholder=" . . ." border=""/></label><br>
        </div>
      </div>
    </div>
  </div>

  <div class="row" style="margin-top: 50px">
    <div class="col-sm-3 col-sm-offset-3">
      <div class="form-group">
        <button type="submit" id="Submit" name="Submit" class="btn btn-default">! ANSWER !</button>
      </div>
    </div>
  </div>
					
  <div id="errorBox" style="margin-bottom:50px; color: red"></div>
      
</form>