我已经填写了几个问题的表格.每个问题都有复选框或单选按钮,具体取决于问题的类型(可以有多少个答案).
我不确定如何制作仅在选择了某个答案后才会触发的验证功能(选中某些复选框,将触发该功能检查文本区域并检查其内容).
该代码也可以在下面找到:
// 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>
最佳答案
如果要使其保持通用,则将data attribute添加到需要其他文本的复选框,并进行验证以检查数据属性:
原文链接:https://www.f2er.com/html/530421.html<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,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>