Brief overview, have three functions that return boolean for the zip code and email format and another to check if two fields are not empty and contain the same value. The wrapper functions I made that use another function to write to a div.innerHTML work fine. The function I made to check them all and then to call the 3 individual wrapper functions doesnt respond at all. FF Error Console reports nothing and IE does not alert anything either. I don't know what is wrong. If anyone can take a look at the code and tell me where I am doing something wrong or try to run it in your own browser? Any help is very much appreciated.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test Form Checker</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="generator" content="HAPedit 3.1">
<script type="text/javascript">
function isValidZip(value) {
   var re = /^\d{5}([\-]\d{4})?$/;
   return (re.test(value));
}

function validEmail(str){
return ((str.indexOf(".",str.indexOf("@")) - str.indexOf("@") > 1) && (str.indexOf("@") == str.lastIndexOf("@")) && (str.indexOf("@") > 0 && str.lastIndexOf(".") < str.length - 1))
}

function isPassword(x,y) {
   return (x != "" && x == y)
}

function writeTo(x){
M = document.getElementById("dumpHere");
M.innerHTML+=x+"<br />"
return true;
}

function testZip(v) {
if (isValidZip(v)){
   writeTo("Valid Zip Code Format!");
   return true;
   }
writeTo("Not a valid zip code format!!!");
return true;
}

function testEmail(v){
if (validEmail(v)){
   writeTo("Valid E-mail Format");
   return true;
   }
writeTo("Not valid email format!!!");
return false;
}

function checkPass(){
if (isPassword(document.getElementById("input3").value,document.getElementById("input4").value)){
writeTo("Password Good!!!!");
return true
}
writeTo("Password not valid, enter a value and matching value to confirm!!!")
return true
}

function testForm() {
if (validEmail(document.getElementById("input2").value) && isValidZip(document.getElementById("input1").value) && isPassword(document.getElementById("input3").value,document.getElementById("input4").value)){
   writeTo("Form Ready to Submit!!!");
   return true;
   }
isValidZip(document.getElementById('input1').value);
isValidEmail(document.getElementById('input2').value);
checkPass();
return true
}
</script>
</head>
<body bgcolor="#FFFFFF">
<hr />
<input type="text" id="input1"><br />
<input type="text" id="input2"><br />
<input type="text" id="input3"><br />
<input type="text" id="input4"><br />
<input type="button" value="Is Input1 zipcode?" onclick="testZip(document.getElementById('input1').value);"><br />
<input type="button" value="Is Input2 email?" onclick="testEmail(document.getElementById('input2').value);"><br />
<input type="button" value="Is Input3 and Input4 same?" onclick="checkPass();"><br />
<input type="button" value="Check" onlick="testForm()"><br />
<div id="dumpHere"></div>
</body>
</html>

I wish I that I would get an error or something, but this literally shows me nothing. Maybe someone here can identify where I went wrong with it.

Ok, I think I typoed on the

function testForm() {
if (validEmail(document.getElementById("input2").value) && isValidZip(document.getElementById("input1").value) && isPassword(document.getElementById("input3").value,document.getElementById("input4").value)){

with ))

No that has to be there, otherwise there is an error. Darn, I can't figure it out. Someone please help.

Ok, the code I posted earlier was calling the wrong functions, but I fixed that, I even removed the if statement from testForm() This is what I am currently running but the effect is still the same for me, no response and no error. Its funny but the error console should have flagged the wrong function name in the earlier code, but I don't know what is going on here.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test Form Checker</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="generator" content="HAPedit 3.1">
<script type="text/javascript">
function isValidZip(value) {
   var re = /^\d{5}([\-]\d{4})?$/;
   return (re.test(value));
}

function validEmail(str){
return ((str.indexOf(".",str.indexOf("@")) - str.indexOf("@") > 1) && (str.indexOf("@") == str.lastIndexOf("@")) && (str.indexOf("@") > 0 && str.lastIndexOf(".") < str.length - 1));
}

function isPassword(x,y) {
   return (x != "" && x == y);
}

function writeTo(x){
M = document.getElementById("dumpHere");
M.innerHTML+=x+"<br />";
return true;
}

function testZip(v) {
if (isValidZip(v)){
   writeTo("Valid Zip Code Format!");
   return true;
   }
writeTo("Not a valid zip code format!!!");
return true;
}

function testEmail(v){
if (validEmail(v)){
   writeTo("Valid E-mail Format");
   return true;
   }
writeTo("Not valid email format!!!");
return false;
}

function checkPass(){
if (isPassword(document.getElementById("input3").value,document.getElementById("input4").value)){
writeTo("Password Good!!!!");
return true;
}
writeTo("Password not valid, enter a value and matching value to confirm!!!");
return true;
}

function testForm() {
testZip(document.getElementById('input1').value);
testEmail(document.getElementById('input2').value);
checkPass();
return true;
}
</script>
</head>
<body bgcolor="#FFFFFF">
<hr />
<input type="text" id="input1"><br />
<input type="text" id="input2"><br />
<input type="text" id="input3"><br />
<input type="text" id="input4"><br />
<input type="button" value="Is Input1 zipcode?" onclick="testZip(document.getElementById('input1').value);"><br />
<input type="button" value="Is Input2 email?" onclick="testEmail(document.getElementById('input2').value);"><br />
<input type="button" value="Is Input3 and Input4 same?" onclick="checkPass();"><br />
<input type="button" value="Check" onlick="testForm();"><br />
<div id="dumpHere"></div>
</body>
</html>

You have a < character in your script.

You have to have a separate .js file when this happens. Otherwise, HTML parsing begins again at the < character.

Also, anyone can read your code and find out the password. You must use server-side processing (not client-side) for passwords.

Thanks for the lead, I am currently looking for that character in the script, and this is just the register new page, these functions will actually just check the form before posting to itself and it is in php. This was just a dummy page to check the functionality.
I am still going to have php check things again as well as check for the username already in the database, among other things. Hopefully I can find the < char. Hopefully this will fix things and I can use the functions. I just didnt want the php to process it over and over again, and figured that having javascript precheck it would reduce the amount of times the server would possibly do it. Yeah I know that having javascript check the form and then php again is a bit redundant, but at least my server doesnt have to serve the page again and again over silly mistakes.

Hmmm, I found the < char in the validEmail() function as checking to make sure that a period was not the last char in the string and again in a string in the writeTo() function that I use to write to the div and add a line break. I will try these in an external script. Maybe that will make them work. I'll post again after the test.

Well, I tried first to change the validEmail() function and the writeTo() function without the < character and so I did. The problem still persist. The 3 buttons calling the individual wrapper functions work but the button that calls them one after another does not. I tried also putting the functions in the external .js and that did not work either. The code still works for the first three
buttons meaning that the functions are working, but why would the testForm() not work. Im still lost. This is the working code with the <'s taken out.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test Form Checker</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="generator" content="HAPedit 3.1">
<script type="text/javascript">
function isValidZip(value) {
   var re = /^\d{5}([\-]\d{4})?$/;
   return (re.test(value));
}

function validEmail(str){
return ((str.indexOf(".",str.indexOf("@")) - str.indexOf("@") > 1) && (str.indexOf("@") == str.lastIndexOf("@")) && (str.indexOf("@") > 0 && str.length - 1 > str.lastIndexOf(".")));
}

function isPassword(x,y) {
   return (x != "" && x == y);
}

function writeTo(x){
M = document.getElementById("dumpHere");
M.innerHTML+=x+"&lt;br />";
return true;
}

function testZip(v) {
if (isValidZip(v)){
   writeTo("Valid Zip Code Format!");
   return true;
   }
writeTo("Not a valid zip code format!!!");
return true;
}

function testEmail(v){
if (validEmail(v)){
   writeTo("Valid E-mail Format");
   return true;
   }
writeTo("Not valid email format!!!");
return false;
}

function checkPass(){
if (isPassword(document.getElementById("input3").value,document.getElementById("input4").value)){
writeTo("Password Good!!!!");
return true;
}
writeTo("Password not valid, enter a value and matching value to confirm!!!");
return true;
}

function testForm() {
testZip(document.getElementById('input1').value);
testEmail(document.getElementById('input2').value);
checkPass();
return true;
}
</script>
</head>
<body bgcolor="#FFFFFF">
<hr />
<input type="text" id="input1"><br />
<input type="text" id="input2"><br />
<input type="text" id="input3"><br />
<input type="text" id="input4"><br />
<input type="button" value="Is Input1 zipcode?" onclick="testZip(document.getElementById('input1').value);"><br />
<input type="button" value="Is Input2 email?" onclick="testEmail(document.getElementById('input2').value);"><br />
<input type="button" value="Is Input3 and Input4 same?" onclick="checkPass();"><br />
<input type="button" value="Check" onlick="testForm();"><br />
<div id="dumpHere"></div>
</body>
</html>

The wrapper functions use the wrtieTo() and now print out the br tags as text instead of the actual line breaks, and the functions still work although the text doesnt have line breaks, but what I can't figure out is why the testForm() still doesnt work.

Parameter passing does not work in the normal way when you use onclick or some other on- call. You can't put a parameter inside the function call parentheses in the way you do in javascript itself.

I wonder why, but for some reason FF and IE call testZip() and testEmail() with the params fine. They both call writeTo() and writeTo() does update the div.innerHTML even when I had the BR tag with the < and when I replaced it with &lt; it still updated it. testEmail() and checkPass() which are after the writeTo() function should have the same problem of testForm() because they came after the writeTo() function as well, but only testForm() doesnt respond. I dont understand why the other buttons that pass params work, but the one function that doesnt pass any params from the button doesn't. Even checkPass() wich passes params to the isPassword() internally works. But testForm(), which would call all three functions, does not, while it also passess params internally. Even with the parameter passing being wierd, why would the other two functions that receive params from the onclick work and the checkPass() function that has two params coded into it would work and not the testForm. Have you tried the code in a browser? I have tested it in FF2 and IE6 and both behave the same. Run the three buttons and don't respond on the "check" button. How would you suggest I write the code so that this doesn't happen?

The fact that a browser will interpret wrong code "the way I meant it to work" does not mean that other browsers will do so, nor does it mean that the browser will continue to do so in the future.

This article has been dead for over six months. Start a new discussion instead.