JavaScript问题求助

lzd23722086 2017-04-29 10:29:27

跟着书上做了一个表单的例子，目前想要实现的效果是如果没有选择单选按钮，该单选按钮的标签和按钮本身就转变为红色的粗体。然而我照着书上的代码敲了一遍，运行下来发现，为选择单选按钮点击提交，什么事情都没有发生，同时所有的项目都填写完毕以后，点击提交也毫无反应。研究了一天了，没个结果，无奈之下只好来求助各位大佬了。

js代码如下：
window.onload = initForms;
function initForms() {
for(var i = 0;i < document.forms.length;i++) {
document.forms[i].onsubmit = validForm;
}
}
function validForm() {
var allGood = true;
var allTags = document.getElementsByTagName("*");
for(var i = 0;i < allTags.length;i++) {
if(!validTag(allTags[i])) {
allGood = false;
}
}
return allGood;
function validTag(thisTag) {
var outClass = "";
var allClasses = thisTag.className.split(" ");
for(var j = 0;j < allClasses.length;j++) {
outClass += validBasedOnClass(allClasses[j]) + " ";
}
thisTag.className = outClass;
if(outClass.indexOf("invalid") > -1) {
invalidLabel(thisTag.parentNode);
thisTag.focus();
if(thisTag.nodeName == "INPUT") {
thisTag.select();
}
return false;
}
return true;
function validBasedOnClass(thisClass) {
var classBack = "";
switch(thisClass) {
case "":
case "invalid":
break;
case "reqd":
if(allGood && thisTag.value == "") {
classBack = "invalid ";
}
classBack += thisClass;
break;
case "radio":
if(allGood && !radioPicked(thisTag.name)) {
classBack = "invalid ";
}
classBack += thisClass;
break;
case "isNum":
case "isZip":
case "email":
classBack += thisClass;
break;
default:
if(allGood && !crossCheck(thisTag, thisClass)) {
classBack = "invalid ";
}
classBack += thisClass;
}
return classBack;
}
function crossCheck(inTag, otherFieldID) {
if(!document.getElementById(otherFieldID)) {
return false;
}
return(inTag.value != "" || document.getElementById(otherFieldID).value != "");
}
function radioPicked(radioName) {
var radioSet = "";
for(var k = 0;k < document.forms.length;k++) {
if(!radioSet) {
radioSet = document.forms[k][radioName];
}
}
if(!radioSet) {
return false;
}
for(k = 0;k < radioSet.length;k++) {
if(radioSet[k].checked) {
return true;
}
}
return false;
}
function invalidLabel(parentTag) {
if(parentTag.nodeName == "LABEL") {
parentTag.className += " invalid";
}
}
}
}
html代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset= utf-8">
<title>Car Picker</title>
<link rel = "stylesheet" href = "css/script06.css">
</head>
<body>
<h2 class = "centered">Car Picker</h2>
<form action = "someAction.cgi">
<p><label for = "emailAddr">Email Address;
<input id = "emailAddr" type = "text" size = "30" class = "reqd email">
</label></p>
<p><label for = "color">Colors:
<select id = "color" class = "reqd">
<option value = "" selected>Choose a color</option>
<option value = "Red">Red</option>
<option value = "Green">Green</option>
<option value = "Blue">Blue</option>
</select>
</label></p>
<p>Options:
<label for = "sunroof"><input type = "checkbox" id = "sunroof" value = "Yes">Sunroof(Two door only)</label>
<label for = "pWindows"><input type = "checkbox" id = "pWindows" value = "Yes">Power Windows</label>
</p>
<p><label for = "DoorCt">Doors:
<input type = "radio" id = "twoDoor" name = "DoorCt" value = "twoDoor" class = "radio">Two
<input type = "radio" id = "fourDoor" name = "DoorCt" value = "fourDoor" class = "radio">Four
</label></p>
<p><label for = "zip">Enter your Zip code or pick the dealer nearest you:<br>
Zip:<input id = "zip" type = "text" size = "5" maxlength = "5" class = "isZip dealerList">
<select id = "dealerList" size = "4" class = "zip">
<option value = "California--Lemon Grove">California--Lemon Grove</option>
<option value = "California--Lomita">California--Lomita</option>
<option value = "California--Long Beach">California--Long Beach</option>
<option value = "California--Los Alamitos">California--Los Alamitos</option>
<option value = "California--Los Angeles">California--Los Angeles</option>
</select>
</label></p>
<p><input type = "submit" value = "Submit"> <input type = "reset"></p>
</form>
<script src = "js/script04.js"></script>
</body>
</html>
css样式表如下：
body {
color: #000;
background-color: #FFF;
}
input.invalid {
background-color: #FF9;
border: 2px red inset;
}
label.invalid {
color: #F00;
font-weight: bold;
}
select {
margin-left: 80px;
}
input {
margin-left: 30px;
}
input+select, input+input {
margin-left: 20px;
}
.centered {
text-align: center;
}

...全文

192 1 打赏收藏转发到动态举报

写回复

用AI写文章

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

puydxp 2017-04-30

打赏
举报

这段js好像有问题，那个allGood看起来应该是一个验证的最后结果，默认为True，只要在个别验证时有一个失败，就会赋值为False。但是，在进行个别验证，修改Class的时候，又把这个值作为一个必要条件


           case "reqd":
                    if (allGood && thisTag.value == "") {
                        classBack = "invalid ";
                    }
                    classBack += thisClass;
                    break;

这个意思好像就是说，只有当之前所有的验证都OK，而当前验证失败，才会把class置为“invalid”，这个有点看不懂，所以把类似的这三行改了，就OK了。修改以后的代码：


        function validBasedOnClass(thisClass) {
            var classBack = "";
            switch (thisClass) {
                case "":
                case "invalid":
                    break;
                case "reqd":

                    //if (allGood && thisTag.value == "") {

                    if (thisTag.value == "") {
                        classBack = "invalid ";
                    }
                    classBack += thisClass;
                    break;
                case "radio":
                    //if (allGood && !radioPicked(thisTag.name)) {

                    if (!radioPicked(thisTag.name)) {
                        classBack = "invalid ";
                    }
                    classBack += thisClass;
                    break;
                case "isNum":
                case "isZip":
                case "email":
                    classBack += thisClass;
                    break;
                default:
                    //if ( !crossCheck(thisTag, thisClass)) {
                    if (!crossCheck(thisTag, thisClass)) {
                        classBack = "invalid ";
                    }
                    classBack += thisClass;
            }
            return classBack;
        }