what does this method do?
script :
window.onload = initForms;
function initForms() {
for (var i=0; i< document.forms.length; i++) {
document.forms[i].onsubmit = function() {return 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) {
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 =开发者_StackOverflow社区= "") {
classBack = "invalid ";
}
classBack += thisClass;
break;
default:
classBack += thisClass;
}
return classBack;
}
}
}
This code is meant to check if the user entered the required fields in the HTML form.If the user leaves the required field the field is marked with color.
In the above code what does the function validTag(thisTag) is do ? What is the identifier invalid ? This is not declared anywhere in the HTML file.In case here is the HTML file :
<html>
<head>
<title>Car Picker</title>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" href="script.css" />
</head>
<body>
<h2 align="center">Car Picker</h2>
<form action="#">
<p>
<label for="emailAddr">Enter your email address: <input id="emailAddr" type="text" size="30" class="reqd email" />
</label></br />
<label for="emailAddr2">Re-enter your email address:<input id="emailAddr2" type="text" size="30" class="reqd emailAddr" />
</label>
</p>
<p><label for="color">Colors:
<select id="color" class="reqd">
<option value="" selected="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><input type="submit" value="Submit" /> <input type="reset" /></p>
</form>
</body>
</html>
The css file :
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;
}
If the reqd class is set, the validBasedOnClass function returns the class name invalid if the specified control is empty. In this case, that class is added to the control.
If the class invalid is added, the control gets the focus too.
So it's basically a form validator that ensures that all inputs with the class reqd should be filled before the form is posted.
But where did you get this code from, if you apparently don't know what it does? It seems quite unstructured code too. I wouldn't use it.
- In the above code what does the function validTag(thisTag) is do ?
The validTag function is checking if all the reqd tags are valid (a tag is invalid if he is empty).
- What is the identifier invalid ?
Invalid is not an identifier, it's a class name set in the validBasedOnClass function (it's set if the tag is not valid). (the line that sets it is : classBack = "invalid ";)
Read the comments carefully.
function validTag(thisTag) {
var outClass = "";
var allClasses = thisTag.className.split(" ");
/* <Array> allClasses = a list of all separate class names of `thisTag`*/
/* This loop walks through all elements of the `allClasses` array, and
* calls the `validBasedOnClasses` function (defined below). The return
* value of the function is added to `outClass`, together with a space " "*/
for (var j=0; j<allClasses.length; j++) {
outClass += validBasedOnClass(allClasses[j]) + " ";
}
/*The class attribute of the element is set to the string `outClass`*/
thisTag.className = outClass;
/*Can the string "invalid" be found in the `outClass` string? */
if (outClass.indexOf("invalid") > -1) {
thisTag.focus();/* Puts the user focus to the element*/
if (thisTag.nodeName == "INPUT") {
/* Selects everything in the input, so that the user can easily
* overwrite the contents of the input field*/
thisTag.select();
}
return false; /*Invalid, return FALSE*/
}
return true; /*Valid, return TRUE*/
/* <function> validBasedOnClass - a function used above
* This function accepts a parameter, which equals one of the class names
* of the element */
function validBasedOnClass(thisClass) {
var classBack = ""; /* <string> classBack. This string will be returned*/
switch(thisClass) {
case "": /* An empty class name - Nothing to check*/
case "invalid": /* "invalid" - Remove this class, so that the
* code can validate again (when the "reqd" class
* is encountered) */
break;
case "reqd": /* class name == "reqd" */
/* <boolean> `allGood` is defined at the main function.
* This function will only mark the FIRST invalid input field
* as defined in this function, and the main function */
if (allGood && thisTag.value == "") {
classBack = "invalid "; /*Return class "invalid"*/
}
classBack += thisClass;
/* `classBack` now holds "invalid reqd" or "reqd" */
break;
default:
classBack += thisClass; /* Unknown class, ignore it */
}
return classBack; //Return the (altered) class
}
}
Note: allGood is a variable defined in the main function(validForm):
function validForm() {
var allGood = true;
var allTags = document.getElementsByTagName("*");
for (var i=0; i<allTags.length; i++) { /*Walks through all elements*/
if (!validTag(allTags[i])){ /*Checks whether an element is invalid or not*/
allGood = false;
/* `allGood` = false, notifies <function> allTags that an invalid
* element has already been detected. */
}
}
return allGood;
... //function validTag below
Your piece of code will validate elements, and focus at the first element which is invalid.
加载中,请稍侯......
精彩评论