我正在尝试使用Javascript验证此简单测验。其想法是在提交测验时忘记用户输入时警告用户。
我想弹出警报：
由于我认为有必要理解该问题，因此我将在下面同时提供表格和JavaScript。
<form name="quiz" onsubmit="return validateForm();" >
<ul>
<li><label id="web">Do you ever think about how you would design a web page?</label></li>
<li><input type="radio" value="no" name="rad1"/><span>No</span></li>
<li><input type="radio" value="yes" name="rad2"/><span>Yes</span></li>
<li><label for="check">Which the following are your main priorities? If none, please check N/A</label> </li>
<li><input type="checkbox" name="op1" value="op1"/><span>Ease of Use</span></li>
<li><input type="checkbox" name="op2" value="op2"/> <span>Graphics & Content</span></li>
<li><input type="checkbox" name="op3" value="op3"/><span> The Data Collected</span></li>
<li><input type="checkbox" name="op4" value="op4"/><span>Securing the site from possible attacks</span></li>
<li><input type="checkbox" name="op2" value="op2"/><span>N/A</span></li>
<li><label id="res">Do you enjoy conducting research, asking questions, and building reports?</label></li>
<li><input type="radio" value="no" name="rad3"/><span>No</span></li>
<li><input type="radio" value="yes" name="rad4"/><span>Yes</span></li>
<li><label for="text1">Does hacking a system or stopping a system from being hacked sound interesting to you? Type Yes or No:</label></li>
<li><textarea name="text1" id="text1" maxlength="3"></textarea></li>
<li><input type="submit" value="Finished!" id="submit"></li>
<li><input type="reset" id="reset"></li>
</ul>
</form>
<script>
function validateForm() {
var radio1 = document.quiz.rad1;
var radio2 = document.quiz.rad2;
var ch1 = document.quiz.op1;
var ch2 = document.quiz.op2;
var ch3 = document.quiz.op3;
var ch4 = document.quiz.op4;
var ch5 = document.quiz.op5;
var radio3 = document.quiz.rad3;
var radio4 = document.quiz.rad4;
var tx1 = document.quiz.text1;
function vWebRes(radio1, radio2, radio3, radio4){
x=0;
if(radio1.checked) || (radio2.checked) || (radio3.checked) || (radio4.checked) {
x++;
}
if (x==0) {
alert('You forgot a question!')
radio1.focus();
return false;
}
else {
alert('Completed!');
window.location.reload()
return true;
}
}
function vCheck(ch1, ch2, ch3, ch4, ch5){
y=0;
if(ch1.checked) || (ch2.checked) || (ch3.checked) || (ch4.checked) || (ch5.checked){
y++;
}
if (y==0) {
alert('You forgot a question!')
radio1.focus();
return false;
}
else {
alert('Completed!');
window.location.reload()
return true;
}
}
function vLenght(tx1) {
var txLength = tx.value.length;
if (txLength == 0 || txLength < 3) {
alert("That is an incorrect entry, try again.")
txLength.focus();
return false
}
else {
return true
}
}
function vCheck(tx1) {
if (tx1 == Yes && tx1 == YES && tx1 == yes) || (tx1 == No && tx1 == NO && tx1 == no) {
tx1.focus();
return true
}
else {
return false
}
}
}
</script>
答案 0 :(得分：1)
这是一个大大简化的版本：
function validateForm() {
//Use query selector all to get the humber of checked check boxes
var numChChecked = document.querySelectorAll("input[type=checkbox][name=op1]:checked").length;
var numRad1Checked = document.querySelectorAll("input[type=radio][name=rad1]:checked").length;
var numRad2Checked = document.querySelectorAll("input[type=radio][name=rad2]:checked").length;
var text = document.getElementById("text1");
//Check there is atleast 1 Checkbox checked
if (numChChecked == 0) {
alert("You missed a question")
document.quiz.op1[0].focus();
return false;
}
//Check there is atleast 1 radio button checked
if (numRad1Checked + numRad2Checked === 0) {
alert("You missed a question");
document.quiz.rad1[0].focus();
return false;
}
//Check the text length
if (text.value.length > 3 || text.value.length === 0) {
alert("Invalid response length");
text.focus();
return false;
}
//Nortmalise the case to lower case to simplyfy the check
//also note the " this denotes a string.
if (!(text.value.toLowerCase() === "yes" || text.value.toLowerCase() === "no")) {
alert("Invalid response");
text.focus();
return false;
}
alert("Success");
return true;
}<form name="quiz" onsubmit="return validateForm();">
<ul>
<li><label id="web">Do you ever think about how you would design a web page?</label></li>
<!-- note the radio buttons must have the same name if you want to
toggle between them -->
<li><input type="radio" value="no" name="rad1" /><span>No</span></li>
<li><input type="radio" value="yes" name="rad1" /><span>Yes</span></li>
<li><label for="check">Which the following are your main priorities? If none, please check N/A</label> </li>
<!-- If these are a groupm they probably should have the same name -->
<li><input type="checkbox" name="op1" value="op1" /><span>Ease of Use</span></li>
<li><input type="checkbox" name="op1" value="op2" /> <span>Graphics & Content</span></li>
<li><input type="checkbox" name="op1" value="op3" /><span> The Data Collected</span></li>
<li><input type="checkbox" name="op1" value="op4" /><span>Securing the site from possible attacks</span></li>
<li><input type="checkbox" name="op1" value="op2" /><span>N/A</span></li>
<li><label id="res">Do you enjoy conducting research, asking questions, and building reports?</label></li>
<!-- note the radio buttons must have the same name if you want to
toggle between them -->
<li><input type="radio" value="no" name="rad3" /><span>No</span></li>
<li><input type="radio" value="yes" name="rad3" /><span>Yes</span></li>
<li><label for="text1">Does hacking a system or stopping a system from being hacked sound interesting to you? Type Yes or No:</label></li>
<li><textarea name="text1" id="text1" maxlength="4"></textarea></li>
<li><input type="submit" value="Finished!" id="submit"></li>
<li><input type="reset" id="reset"></li>
</ul>
</form>
请注意，您的HTML存在一些问题。单选按钮或复选框组应具有相同的名称
有关我上面使用的技术的更多信息，请参见：
答案 1 :(得分：0)
如果缺少if语句和函数，则缺少括号。您的js代码应为：
function validateForm() {
var radio1 = document.quiz.rad1;
var radio2 = document.quiz.rad2;
var ch1 = document.quiz.op1;
var ch2 = document.quiz.op2;
var ch3 = document.quiz.op3;
var ch4 = document.quiz.op4;
var ch5 = document.quiz.op5;
var radio3 = document.quiz.rad3;
var radio4 = document.quiz.rad4;
var tx1 = document.quiz.text1;
x=0;
if(radio1.checked || radio2.checked || radio3.checked || radio4.checked) {
x++;
}
if (x==0) {
alert('You forgot a question!')
radio1.focus();
return false;
}
else {
alert('Completed!');
window.location.reload()
return true;
}
y=0;
if(ch1.checked || ch2.checked || ch3.checked || ch4.checked || ch5.checked){
y++;
}
if (y==0) {
alert('You forgot a question!')
radio1.focus();
return false;
}
else {
alert('Completed!');
window.location.reload()
return true;
}
var txLength = tx.value.length;
if (txLength == 0 || txLength < 3) {
alert("That is an incorrect entry, try again.")
txLength.focus();
return false
}
else {
return true
}
if ((tx1 == Yes && tx1 == YES && tx1 == yes) || (tx1 == No && tx1 == NO && tx1 == no)) {
tx1.focus();
return true
}
else {
return false
}
}
答案 2 :(得分：0)
<!DOCTYPE html>
<meta charset="utf-8" />
<form name="quiz" onsubmit="return validateForm();">
<ul>
<li><label id="web">Do you ever think about how you would design a web page?</label></li>
<li><input type="radio" value="no" name="rad1" /><span>No</span></li>
<li><input type="radio" value="yes" name="rad2" /><span>Yes</span></li>
<li><label for="check">Which the following are your main priorities? If none, please check N/A</label> </li>
<li><input type="checkbox" name="op1" value="op1" /><span>Ease of Use</span></li>
<li><input type="checkbox" name="op2" value="op2" /> <span>Graphics & Content</span></li>
<li><input type="checkbox" name="op3" value="op3" /><span> The Data Collected</span></li>
<li><input type="checkbox" name="op4" value="op4" /><span>Securing the site from possible attacks</span></li>
<li><input type="checkbox" name="op2" value="op2" /><span>N/A</span></li>
<li><label id="res">Do you enjoy conducting research, asking questions, and building reports?</label></li>
<li><input type="radio" value="no" name="rad3" /><span>No</span></li>
<li><input type="radio" value="yes" name="rad4" /><span>Yes</span></li>
<li><label for="text1">Does hacking a system or stopping a system from being hacked sound interesting to you? Type Yes or No:</label></li>
<!-- <li><textarea name="text1" id="text1" maxlength="3"></textarea></li> -->
<!-- maxlength changed to higher value or remove it because it is meant to be a paragraph-->
<li><textarea name="text1" id="text1"></textarea></li>
<li><input type="submit" value="Finished!" id="submit"></li>
<li><input type="reset" id="reset"></li>
</ul>
</form>
<script>
function validateForm() {
var radio1 = document.quiz.rad1;
var radio2 = document.quiz.rad2;
var ch1 = document.quiz.op1;
var ch2 = document.quiz.op2;
var ch3 = document.quiz.op3;
var ch4 = document.quiz.op4;
var ch5 = document.quiz.op5;
var radio3 = document.quiz.rad3;
var radio4 = document.quiz.rad4;
var tx1 = document.quiz.text1;
//call these functions in order to validate
vWebRes(radio1, radio2, radio3, radio4);
vCheck(ch1, ch2, ch3, ch4, ch5);
//document.getElementById() gets the HTML element object according to id in <textarea ... id="text1" ...></textarea>
vLength(document.getElementById('text1'));
function vWebRes(radio1, radio2, radio3, radio4) {
x = 0;
//inserted missing braces
if ((radio1.checked) || (radio2.checked) || (radio3.checked) || (radio4.checked)) {
x++;
}
if (x == 0) {
alert('You forgot a question!')
radio1.focus();
return false;
} else {
alert('Completed!');
window.location.reload()
return true;
}
}
function vCheck(ch1, ch2, ch3, ch4, ch5) {
y = 0;
//inserted missing braces
if ((ch1.checked) || (ch2.checked) || (ch3.checked) || (ch4.checked) || (ch5.checked)) {
y++;
}
if (y == 0) {
alert('You forgot a question!')
radio1.focus();
return false;
} else {
alert('Completed!');
window.location.reload()
return true;
}
}
// corrected spelling vLenght to vLength
function vLength(tx1) {
// fixed tx to tx1
// var txLength = tx.value.length;
var txLength = tx1.value.length;
if (txLength == 0 || txLength < 3) {
alert("That is an incorrect entry, try again.")
//removed the following function because there is no access to the HTML input field unless you would like to add it
//txLength.focus();
tx1.focus();
return false
} else {
return true
}
}
/*
renamed second vCheck to vCheck2
this function is just a confusion that overwrites the first vCheck because this function serves nothing useful but fixed anyway
*/
function vCheck2(tx1) {
//inserted missing braces
//in this case, tx1 compares the value '==' as string
if ((tx1 == "Yes" && tx1 == "YES" && tx1 == "yes") || (tx1 == "No" && tx1 == "NO" && tx1 == "no")) {
tx1.focus();
return true
} else {
return false
}
}
}
//good luck
</script>