Hi folks,
Background: I'm studying web design, but have no programming experience and have been battling with javascript for months. I've been trying to learn basic form validation and running myself around in circles with various tutorials that all seem to do it differently.
Today I've been working right through a script from the Visual Quickstart Guide to Javascript & Ajax, commenting it as I go to help me understand it. I got it working for checking if required fields are filled in, but I cannot get the email validation part to work. I have copied the code from the book's website (
http://www.javascriptworld.com/chapter7.html), but as the book gradually adds things to the code, some of which I don't need, I think I might have removed or left off something that is required (though I've checked it dozens of times).
I ran it through the JSLint validator (don't know if that is a good tool or not), and fixed a few missing semicolons, etc, and there were a bunch of things I didn't really understand, but don't think they're the problem as they all exist in the working code. If someone can have a look and tell me if I'm missing something, I'd be really grateful.
Here is my code:
javascript Code:
//Script courtesy of [url]http://javasacriptworld.com[/url]
window.onload = initForms;
//Loops through every form on the page and adds an event handler to the forms onsubmit - call to function return validForm
function initForms() {
for (var i=0; i< document.forms.length; i++) {
document.forms[i].onsubmit = function() {return validForm();};
}
}
function validForm() {
var allGood = true;
//returns an array containing all tags on the page
var allTags = document.getElementsByTagName("*");
//searches through all tags and calls validTag function, which checks to see if there's anything wrong
//if anything is wrong with a tag, it sets allGood to false, but still keeps looking at all the tags
for (var i=
0; i<allTags.
length; i++
) { if (!validTag(allTags[i])) {
allGood = false;
}
}
return allGood;
function validTag(thisTag) {
var outClass = "";
//creates an array of all the class names for the tag, by splitting the class attribute at each space
var allClasses = thisTag.className.split(" ");
//checks all the class attributes and calls the validBasedOnClass function (described below). Adds whatever that function returns, plus a space to the outClass variable
for (var j=
0; j<allClasses.
length; j++
) { outClass += validBasedOnClass(allClasses[j]) + " ";
}
//puts the contents of outClass and puts it into the class for this tag
thisTag.className = outClass;
//If the word "invalid" is returned in the new class attribute, put focus on that field
if (outClass.indexOf("invalid") > -1) {
invalidLabel(thisTag.parentNode);
thisTag.focus();
//if this is an input tag, select it
if (thisTag.nodeName == "INPUT") {
thisTag.select();
}
return false;
}
return true;
function validBasedOnClass(thisClass) {
var classBack = "";
//look at the class attribute that was passed, and if it was "invalid" or empty, break out of the conditional. Otherwise keep going.
switch(thisClass) {
case "":
case "invalid":
break;
//if the attribute is "reqd", and allGood is true, and the tag is empty, set classBack to invalid (which puts the "invalid" class on the tag
case "reqd":
if (allGood && thisTag.value == "") classBack = "invalid ";
classBack += thisClass;
break;
case "email":
if (allGood && !validEmail(thisTag.value)) classBack = "invalid ";
classBack += thisClass;
break;
default:
classBack += thisClass;
}
return classBack;
}
function validEmail(email) {
var invalidChars = " /:,;";
if (email == "") {
return false;
}
for (var k=0; k<invalidChars.length; k++) {
var badChar = invalidChars.charAt(k);
if (email.indexOf(badChar) > -1) {
return false;
}
}
var atPos = email.indexOf("@",1);
if (atPos == -1) {
return false;
}
if (email.indexOf("@",atPos+1) != -1) {
return false;
}
var periodPos = email.indexOf(".",atPos);
if (periodPos == -1) {
return false;
}
if (periodPos+3 > email.length) {
return false;
}
return true;
}
function invalidLabel(parentTag) {
if (parentTag.nodeName == "LABEL") {
parentTag.className += " invalid";
}
}
}
}
And the HTML:
html4strict Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <script type="text/javascript" src="reqfields.js"> </script>
<link rel="stylesheet" href="reqfields.css" /> </head>
<form method="post" action="emailform.php"> <legend>Contact Bazaar Ceramics
</legend> <label for="name">Your Name
</label><input type="text" name="name" id="name" class="reqd"/><br /> <label for="phone">Phone number
</label><input type="text" name="phone" id="phone" /><br /> <label for="email">Email address
</label><input type="text" name="email" id="email" class="reqd"/><br /> <label for="comments">Comments
</label><textarea cols="20" name="comments" id="comments" rows="5" class="reqd"></textarea><br /> </fieldset>
<input type="submit" value="Send" class="buttons" /> </fieldset>
</form>
</body>
</html>
Linear Mode
