我已经提出了几个问题的表格。每个问题都有复选框或单选按钮，具体取决于问题的类型（可以有多少个答案）。
然后我开始制作验证功能，以便能够检查用户是否填写了整个表格。
我不确定如何制作仅会在选择了某个答案的情况下触发 的验证功能（选中某些复选框，会触发该功能检查文本区域并检查其内容）。 / p>
到目前为止，我的代码here可以找到。
// 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>
答案 0 :(得分：2)
如果要使其通用，请将data attribute添加到需要其他文本的复选框，并进行验证以检查数据属性：
<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>