我正在尝试使用 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>
<!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>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句