Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Class Problems with Validation

Status
Not open for further replies.
cfgcjm

cfgcjm

Programmer
Oct 30, 2007
21
US
I'm very new to javascript so forgive my naive sense of things...
i have a registration form which is available at The form is linked to the file check.js which is to check for empty fields and to validate that the two passwords are the same...It is shown here:
Code:

Code: 
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 == "") classBack = "invalid ";
					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);
		}
	}
}

Set in my regular page it does not work, meaning the script will not change the classes to notify the user of an error...HOWEVER...if i remove all of the other classes in the page: It works fine.

I've looked at all of the code and i dont understand, but like i said i'm new to this and i got this script out of a book i bought on javascript.


Code for registration1.php
HTML Code:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
	<title>Gayle Lanphier - Nutrition : Services</title>
	<style type="text/css" media="all">
	<!--
	@import url([URL unfurl="true"]http://www.digiconmediagroup.com/Homeplate/hpn.css);[/URL]
	-->
	.style1 {
	text-align: right;
}
	</style>
	<script language="javascript" type="text/javascript" src="check.js">
	</script>
</head>
<body>
<div id="wrapper">
	<div id="header">
		<div id="Logocorner" class="style1">
		Gayle Lanphier
		<div id="logodisc">
		Nutrition Consulatant</div><!--logodisc-->
		</div><!--logocorner-->
		<div id="pageheader">
		</div><!--pageheader-->
	</div><!--header-->
	<div id="main">
		<div id="nuttip">
			<div id="nuttiphead">
			Nutrition Tip of the Day
			</div><!--nuttiphead-->
			<div id="nuttipcont">
			<?php echo file_get_contents('[URL unfurl="true"]http://www.digiconmediagroup.com/Homeplate/tip.txt');[/URL] ?>
			</div><!--nuttipcont-->
		</div><!--nuttip-->
		<div id="mainnav">
			<div id="mainnavhead">
			Categories
			</div><!--mainnavhead-->
			<div id="navcont">
				<div id="categories" class="boxed">
					<div class="content">
						<ul>
							<li class="first">
							<a href="[URL unfurl="true"]http://digiconmediagroup.com/Homeplate/">[/URL]
							Welcome</a></li>
							<li>
							<a href="[URL unfurl="true"]http://digiconmediagroup.com/Homeplate/about/">[/URL]
							About Gayle</a></li>
							<li>
							<a href="#">
							<strong>Services</strong></a></li>
							<li><a href="#">Member Portal</a></li>
							<li>
							<a href="[URL unfurl="true"]http://digiconmediagroup.com/Homeplate/photo/">[/URL]
							Photo Gallery</a></li>
							<li>
							<a href="[URL unfurl="true"]http://digiconmediagroup.com/Homeplate/events/">[/URL]
							Upcoming Events</a></li>
							<li>
							<a href="[URL unfurl="true"]http://digiconmediagroup.com/Homeplate/contact/">[/URL]
							Contact</a></li>
						</ul>
					</div><!--content-->
				</div><!--categories-->
			</div><!--navcont-->
		</div><!--mainnav-->
		<div id="maincont">
		<span class="post title">Member Portal Registration</span><span class="post posteda">All Fields Required</span>
		<form action="#" class="regtxt">
<table style="width: 100%">
	<tr>
		<td class="regtxtb" style="height: 30px">Username:</td>
		<td class="regtxtc" style="height: 30px">
		<input name="username" type="text" class="reqd" tabindex="1"/></td>
		<td class="regtxtb" style="height: 30px">&nbsp;</td>
		<td style="height: 30px">&nbsp;</td>
	</tr>
	<tr>
		<td class="regtxtb" style="height: 30px">Password:</td>
		<td class="regtxtc" style="height: 30px">
		<input name="passwd1" type="password" id="passwd1" class="reqd" tabindex="2"/></td>
		<td class="regtxtb" style="height: 30px">Verify Password:</td>
		<td class="regtxtc" style="height: 30px">
		<input name="passwd2" type="password" id="passwd2" class="reqd" tabindex="3" /></td>
	</tr>
	<tr>
		<td class="line" style="height: 18px" colspan="4">
		<img alt="" src="images/line.png" width="515" height="5" /></td>
	</tr>
	<tr>
		<td class="regtxtb" style="height: 30px">First Name:</td>
		<td class="regtxtc" style="height: 30px"><input name="fname" type="text" class="reqd" tabindex="4" /></td>
		<td class="regtxtb" style="height: 30px">Topic of Interest:</td>
		<td class="regtxtc" style="height: 30px">
		<input name="interest" type="text" class="reqd" tabindex="7" /></td>
	</tr>
	<tr>
		<td class="regtxtb" style="height: 30px">Last Name:</td>
		<td class="regtxtc" style="height: 30px"><input name="lname" type="text" class="reqd" tabindex="5" /></td>
		<td class="regtxtb" style="height: 30px">Favorite Food:</td>
		<td class="regtxtc" style="height: 30px">
		<input name="food" type="text" class="reqd" tabindex="8" /></td>
	</tr>
	<tr>
		<td class="regtxtb" style="height: 30px">E-mail Address:</td>
		<td class="regtxtc" style="height: 30px">
		<input name="email" type="text" class="reqd" tabindex="6" /></td>
		<td class="regtxtb" style="height: 30px">Favorite Sport:</td>
		<td class="regtxtc" style="height: 30px"><input name="sport" type="text" class="reqd" tabindex="9" /></td>
	</tr>
	<tr>
		<td style="height: 25px" valign="top">&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td class="regtxtc" style="height: 30px">
		<input name="Submit" type="submit" value="submit" tabindex="10" />&nbsp;</td>
	</tr>
</table>
</form>
		</div><!--maincont-->
		<!--services-->
		<div id="footer" class="style1">
		<span class="foorterlink">[&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
		<a href="[URL unfurl="true"]http://digiconmediagroup.com/Homeplate/info/granola.htm">Nuts[/URL] 
		About Granola</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; |&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
		<a target="_blank" href="[URL unfurl="true"]http://www.eatright.org/">[/URL]
		American Dietetic Association</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; |&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
		<a target="_blank" href="[URL unfurl="true"]http://www.gssiweb.com">Gatorade[/URL] Sports Science</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
		]<br />
		<span class="post posted">© 2007 Digicon Media Group | Gayle Lanphier 
		RD, LDN does not endorse the content, products or services of other Web 
		sites.</span></span></div><!--footer-->
	</div><!--main-->
</div><!--wrapper&table-->
</body>

</html>


Code for reg2.php
HTML Code:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
	<title>Gayle Lanphier - Nutrition : Services</title>
	<style type="text/css" media="all">
	<!--
	@import url([URL unfurl="true"]http://www.digiconmediagroup.com/Homeplate/hpn.css);[/URL]
	-->
	.style1 {
	text-align: right;
}
	</style>
	<script language="javascript" type="text/javascript" src="check.js">
	</script>
</head>
<body>
<form action="#"> 
<table style="width: 100%">
	<tr>
		<td  style="height: 30px">Username:</td>
		<td  style="height: 30px">
		<input name="username" type="text" class="reqd" tabindex="1"/></td>
		<td  style="height: 30px">&nbsp;</td>
		<td style="height: 30px">&nbsp;</td>
	</tr>
	<tr>
		<td  style="height: 30px">Password:</td>
		<td  style="height: 30px">
		<input name="passwd1" type="password" id="passwd1" class="reqd" tabindex="2"/></td>
		<td  style="height: 30px">Verify Password:</td>
		<td  style="height: 30px">
		<input name="passwd2" type="password" id="passwd2" class="reqd" tabindex="3" /></td>
	</tr>
	<tr>
		<td style="height: 18px" colspan="4">
		<img alt="" src="images/line.png" width="515" height="5" /></td>
	</tr>
	<tr>
		<td  style="height: 30px">First Name:</td>
		<td  style="height: 30px"><input name="fname" type="text" class="reqd" tabindex="4" /></td>
		<td  style="height: 30px">Topic of Interest:</td>
		<td  style="height: 30px">
		<input name="interest" type="text" class="reqd" tabindex="7" /></td>
	</tr>
	<tr>
		<td  style="height: 30px">Last Name:</td>
		<td  style="height: 30px"><input name="lname" type="text" class="reqd" tabindex="5" /></td>
		<td  style="height: 30px">Favorite Food:</td>
		<td  style="height: 30px">
		<input name="food" type="text" class="reqd" tabindex="8" /></td>
	</tr>
	<tr>
		<td  style="height: 30px">E-mail Address:</td>
		<td  style="height: 30px">
		<input name="email" type="text" class="reqd" tabindex="6" /></td>
		<td  style="height: 30px">Favorite Sport:</td>
		<td  style="height: 30px"><input name="sport" type="text" class="reqd" tabindex="9" /></td>
	</tr>
	<tr>
		<td style="height: 25px" valign="top">&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td  style="height: 30px">
		<input name="Submit" type="submit" value="submit" tabindex="10" />&nbsp;</td>
	</tr>
</table>
</form>
		
</body>

</html>


any help would be great
Reply With Quote
 
Sort by date Sort by votes
You have a big [tt]return true;[/tt] in the middle of your function, which means your function is always going to stop running at that point (assuming it doesn't hit the earlier [tt]return false;[/tt]. [tt]return[/tt] is the statement which tells javascript to stop executing the current function and deliver some value back to the calling function.

Are you sure all the functions are meant to be wrapped up in one like that? It would make a lot more sense if they were declared as discrete functions in their own right.

Maybe check the book's example again.

[sub]Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.[/sub]
Webflo
 
Upvote 0 Downvote
I just read through every piece of code out of the book and it's correct. It was copy pasted from the companion site

the script at

is the same javascript file but without the password match validation and it works fine with all classes in place.
This is that .js file

Code: 
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 == "") classBack = "invalid ";
					classBack += thisClass;
					break;
				default:
					classBack += thisClass;
			}
			return classBack;
		}
	}
}
 
Upvote 0 Downvote
The nested functions are fine, it's just not a common way of doing things. Nested functions are used for calls to functions that are intended to be completely local to the calling function. Nothing outside the outer function can call the nested function.


Lee
 
Upvote 0 Downvote
Sorry, i'm new to this...i dont know what you mean by "Nothing outside the outer function can call the nested function.
 
Upvote 0 Downvote
Read the link I provided on what nested functions are. The code you have is fine, though not that common.

Lee
 
Upvote 0 Downvote
Your [tt][maroon]return true;[/maroon][/tt] stops that function so the nested child function is never defined and cannot be accessed. You should move the nested function up to the beginning of the main function so it can be accessed. But I don't recommand using nested functions like this..

- Lowet

[gray]Why can't all browsers parse pages the same way? It should be the Web designer who decides how to display the content, not the browser![/gray]
 
Upvote 0 Downvote
ok, obviously i'm having trouble with this and can't figure it out...is there an easier way to change the class of an input box if it's empty and if the passwords do not match?
 
Upvote 0 Downvote
Hmm, you should not use the [tt][maroon]document.getElementsByTagName("*")[/maroon][/tt], because it will get all the tags/nodes, even text-nodes which does not have the [tt][maroon]className[/maroon][/tt].. Use the [tt][maroon]document.forms['what_ever_form'].elements[/maroon][/tt] instead if you want a collection of form elements.. I don't have the time to look through all the code now, but I gave you some hints.

- Lowet

[gray]Why can't all browsers parse pages the same way? It should be the Web designer who decides how to display the content, not the browser![/gray]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

JPSeo
  • Locked
  • Question
--How to implement req.body.param validation
Replies
0
Views
72
JPSeo
JPSeo
penguinspeaks
  • Locked
  • Question
How do I pass a classic asp variable to JS
Replies
1
Views
522
xwb
xwb
edgarv
  • Locked
  • Question
Field with numbers and characters get nan
Replies
1
Views
110
ggriffit
ggriffit
bs6600
  • Locked
  • Question
Accordion - Anchors in panels causing problems 1
Replies
6
Views
145
feherke
feherke
JPSeo
  • Locked
  • Question
Another cjhild_process.exec issue with complex shell command
Replies
0
Views
79
JPSeo
JPSeo

Part and Inventory Search

Sponsor

Back
Top