JavaScript Question - Dev Articles

Dev Articles Community Forums Sponsor:

SlickEdit: Code in over 40 languages across 7 platforms. SlickEdit’s unmatched power, speed, and flexibility allows even the most accomplished developers to write better code faster. Download a free trial today!

June 29th, 2005, 02:46 PM

pentapenguin

Contributing User

Join Date: Dec 2002

Posts: 51

Time spent in forums: 36 m 7 sec
Reputation Power: 6

JavaScript Question

I saw this neat script on www.quirksmode.org : http://www.quirksmode.org/dom/error.html
Neat huh?
<plug>
Wow!
I found that site the other day and have spend hours there learning some really great CSS and JavaScript tips and tricks.
Be sure to look yourself if you're interested in that!
</plug>

Anyways, I put it into a login form I'm doing for a client.
However, it's very, very funny acting.
If you fill in the form correctly the first time, the form submits.
However, if you don't fill in all the form the first time, but fix it the second time around, the errors disappear but the form doesn't submit!
I first thought it was extra JavaScript I added but I removed it and I'm using the exact same code that the site gives and it still won't work!
Does anyone have any ideas?
Here's the exact code I'm using (two small JavaScript edits are highlighted--though removing them doesn't seem to make any difference).

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" dir="ltr">  
<head>  
<meta name="MSSmartTagsPreventParsing" content="true" />  
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />  
<meta http-equiv="Content-Language" content="en-us" />  
 
<script>  
<!--  
 
var W3CDOM = (document.getElementsByTagName && document.createElement);  
 
window.onload = function () {  
   document.forms[0].onsubmit = function () {  
       return validate()  
   }  
}  
 
function validate()  
{  
   validForm = true;  
   errorstring = '';  
   var x = document.forms[0].elements;  
   for (var i=0;i<x.length;i++)  
   {  
       if (!x[i].value && !(typeof x[i].type == "undefined"))  
           writeError(x[i],'This field is required');  
   }  
   /*if (x['email'].value.indexOf('@') == -1)
       writeError(x['email'],'This is not a valid email address');*/  
   if (!W3CDOM)  
       alert(errorstring);  
   if (firstError)  
       firstError.focus();  
   return false;  
}  
 
function writeError(obj,message)  
{  
   if (obj.hasError) return;  
   if (W3CDOM)  
   {  
       obj.className += ' error';  
       obj.onchange = removeError;  
       var sp = document.createElement('span');  
       sp.className = 'error';  
       sp.appendChild(document.createTextNode(message));  
       obj.parentNode.appendChild(sp);  
       obj.hasError = sp;  
   }  
   else  
   {  
       errorstring += obj.name + ': ' + message + '\n';  
       obj.hasError = true;  
   }  
   if (validForm)  
       firstError = obj;  
   validForm = false;  
}  
 
function removeError()  
{  
   this.className = this.className.substring(0,this.className.lastInde  xOf(' '));  
   this.parentNode.removeChild(this.hasError);  
   this.hasError = null;  
   this.onchange = null;  
}  
 
// -->  
 
</script>  
 
<style type="text/css">  
/*  
Main tags  
*/  
 
html, body {  
   font-family: arial;  
   color: black;  
   background-color: white;  
}  
 
fieldset, legend {  
   margin-left: auto;  
   margin-right: auto;  
   width: 725px;  
   font-weight: bold;  
   border: 1px solid;  
}  
 
label, input {  
   display: block;  
   width: 150px;  
   float: left;  
   margin-bottom: 10px;  
}  
 
label {  
   text-align: right;  
   width: 75px;  
   padding-right: 20px;  
}  
 
p {  
   clear: left;  
   margin: 0;  
   margin-bottom: 10px;  
}  
 
br {  
   clear: left;  
}  
 
input[type=text]:focus {  
   background-color: aliceblue;  
   color: black;  
   font-weight: bold;  
}  
 
/*  
IDs  
*/  
#body {  
   margin-left: auto;  
   margin-right: auto;  
   width: 800px;  
     
}  
 
#header {  
   text-align: center;  
}  
 
#content {  
 
}  
 
#footer {  
   text-align: center;  
   font-style: italic;  
}  
 
/*  
Classes  
*/  
span.error {  
   display: block;  
   float: left;  
   margin-left: 20px;  
   color: #cc0000;  
   font-weight: 600;  
}  
 
span.error:before {  
   content: url('../images/error.png');  
}  
 
input.error {  
   border: 1px solid #cc0000;  
   background-color: #ffffff;  
}  
</style>  
<title>Grant Park Pool Administration :: Login</title>  
</head>  
<body>  
 
<div id="body">  
 
<div id="header">  
<img src="../images/_top.jpg" alt="Logo" title="Logo" width="750" height="161" />  
</div>  
 
<div class="error">  
</div>  
 
<div class="message">  
</div>  
 
<br />  
<form action="/grantparkpool/admin/login.php" method="post">  
   <fieldset>  
 
   <legend>Please enter your login information:</legend>  
   <p>  
   <label for="username">Name:</label>  
   <input id="username" name="username" type="text" value="" maxlength="25" />  
   </p>  
     
   <p>  
   <label for="password">Password:</label>  
 
   <input id="password" name="password" type="password" />  
   </p>  
     
   <p>  
   <label for="submit">&nbsp;</label>  
   <input id="submit" name="submit" type="submit" value="Log In" />  
   </p>  
   </fieldset>  
</form>  
 
<div id="footer">  
Site Design by Accounting Advisors  
</div>  
 
</div>  
 
</body>  
</html>

Tested this on Opera, Firefox (looks best in BTW), and IE all don't work.
I'd really appreciate any ideas!

July 5th, 2005, 06:09 PM

Kravvitz

Contributing User

Join Date: May 2005

Location: USA

Posts: 134

Time spent in forums: 23 h 38 m 30 sec
Reputation Power: 4

You changed the return statement in validate().

and you need to add this line before "function validate()"

Code:

var firstError = null;

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: