Hello Javascript specialists,
I'm trying to build a website with a register page, and validating the fields with javascript. This validation is being done every time you go out of an input element, as well as before the form is being submitted.
To do the verification I use a global variable "errors" which is false if there are no errors found, and true if there are errors found. It works great on Mozilla & Opera, but when I tested it on I.E. 6.0 (on windows XP) it behaved very strangly...
After a while I found out that the variable "errors" wasn't correct, and when I used
alert(errors); , I've noticed that the value shown to me was false (-->no errors), but the behavior was good because it was true (--> errors, do not submit).
Then doing
alert(errors); alert(errors); directly after each other first gave me false, and then true!?
To see what I'm talking about I made my code a lot shorter (containing the same problem), and attached that here:
- Code: Select all
<html>
<head>
<title>I hate IE</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<SCRIPT LANGUAGE="JavaScript">
<!--
var errors = false;
function required(HTMLInputElement, message) {
removeError(HTMLInputElement,message);
if(!HTMLInputElement.value)
createError(HTMLInputElement,message);
}
function createError(HTMLInputElement, errorMessage){
if(!errors)
errors = true;
var errorMessage = document.createTextNode(errorMessage);
var divObj = document.createElement("DIV");
divObj.className = "formErrorLine";
divObj.appendChild(errorMessage);
try{
divObj.attributes["id"] = "errorMessage";
}catch(e){}
try{
divObj.attributes["id"].value = "errorMessage";
}catch(e){}
HTMLInputElement.parentNode.parentNode.parentNode.insertBefore(divObj, HTMLInputElement.parentNode.parentNode.nextSibling);
}
function removeError(HTMLInputElement, errorMessage){
if(HTMLInputElement.parentNode.parentNode.nextSibling.nodeType == '1' && HTMLInputElement.parentNode.parentNode.nextSibling.firstChild.data == errorMessage){
HTMLInputElement.parentNode.parentNode.nextSibling.parentNode.removeChild(HTMLInputElement.parentNod e.parentNode.nextSibling);
}
}
function validateForm(){
errors = false;
validateHTMLInputElements();
/* normally, this would be the last line of this function:
return (!errors);
*/
//these alerts are here to show the problem:
alert("Are there any errors? -> " + errors);
alert("And now? -> " + errors);
return false;
}
function validateHTMLInputElements(){
var HTMLInputElements = document.getElementsByTagName("input");
for(i=0; i < HTMLInputElements.length; i++){
try {
var type = HTMLInputElements[i].attributes["type"].value;
HTMLInputElements[i].focus();
}catch(e){}
}
}
// -->
</SCRIPT>
<form name="register" method="post" onSubmit="return validateForm()" >
<div class='formLine'>
<div class='formLabelHeader'><label for="f_name">First name: </label></div>
<div class='formElementHeader'><input type="text" name="f_name" onblur="required(this,'please fill in your first name!'); "></div>
</div>
<div class='formLine'>
<div class='formElementHeader'><input type="submit" class="button" value="REGISTER" ></div>
</div>
</form>
</body>
</html>
To see the absurd behavior, just open the page, and before doing anything else, push the register button.
I think it might be an error in Jscript (the javascript engine of I.E.) and more specifically, something with their garbage collector, although I might be completely wrong.
If you've tried this, get the same error, and aren't using I.E. 6, please let me know what browser (and version) gave the same error.
If you've found a way to get the correct value into varable "errors" without having to use the alert() method, please tell me.
I really need some help with this one.