如何在使用javascript检查复选框后验证“textarea”

Question

我做了一个几乎没有问题的表格。 每个问题都有复选框或单选按钮，具体取决于问题的类型（可以有多少答案）。

然后我开始制作验证功能，以便能够检查用户是否完成了整个表单。

我不确定如何制作一个验证函数，只有在选择某个答案时才会触发（选中某个复选框，会触发函数检查textarea并检查其内容）。

我到目前为止的代码可以在这里找到。

该代码也可在下面找到：

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