[RESOLVED] form validator

AndreF

sorry for asking this non-php relates question as I don't know somewhere else to ask. This is a JS form validator, In my code here:
the issu is that
1) when I submit evrythin blank countries list disapear.
and
2) tos check with two passwords comparison if statements don't work properly. What is my mistake there?

The code is:
<html>
<head>
<title>Registration Form Sample</title>
<style type="text/css">
.warning {
color: #AA0000;
}
</style>
<script language="javascript">
function submitform(){
var message = "";
if (window.document.userinfo.first_name.value.length <= 1){
document.getElementById("fname").innerHTML = "-->";
window.document.userinfo.first_name.focus();
var error = true;
} else {
document.getElementById("fname").innerHTML = "";
}
if (window.document.userinfo.last_name.value.length <= 1){
document.getElementById("lname").innerHTML = "-->";
window.document.userinfo.last_name.focus();
var error = true;
} else {
document.getElementById("lname").innerHTML = "";
}
if (window.document.userinfo.company.value.length <= 1){
document.getElementById("company").innerHTML = "-->";
window.document.userinfo.company.focus();
var error = true;
} else {
document.getElementById("company").innerHTML = "";
}
if (window.document.userinfo.addr_01.value.length <= 1){
document.getElementById("addr01").innerHTML = "-->";
window.document.userinfo.addr_01.focus();
var error = true;
} else {
document.getElementById("addr01").innerHTML = "";
}
if (window.document.userinfo.city.value.length <= 1){
document.getElementById("city").innerHTML = "-->";
window.document.userinfo.city.focus();
var error = true;
} else {
document.getElementById("city").innerHTML = "";
}
if (window.document.userinfo.state.value.length <= 1){
document.getElementById("state").innerHTML = "-->";
window.document.userinfo.state.focus();
var error = true;
} else {
document.getElementById("state").innerHTML = "";
}
if (window.document.userinfo.country.value.length <= 1){
document.getElementById("country").innerHTML = "-->";
window.document.userinfo.country.focus();
var error = true;
} else {
document.getElementById("country").innerHTML = "";
}
if (window.document.userinfo.zip.value.length <= 1){
document.getElementById("zip").innerHTML = "-->";
window.document.userinfo.zip.focus();
var error = true;
} else {
document.getElementById("zip").innerHTML = "";
}
if (window.document.userinfo.phone.value.length <= 8){
document.getElementById("phone").innerHTML = "-->";
window.document.userinfo.phone.focus();
var error = true;
} else {
document.getElementById("phone").innerHTML = "";
}

if (window.document.userinfo.username.value.length <= 8){
document.getElementById("username").innerHTML = "-->";
window.document.userinfo.username.focus();
var error = true;
} else {
document.getElementById("username").innerHTML = "";
}
if (window.document.userinfo.pswrd.value.length <= 8){
document.getElementById("pswrd").innerHTML = "-->";
window.document.userinfo.pswrd.focus();
var error = true;
} else {
document.getElementById("pswrd").innerHTML = "";
}
if (!window.document.userinfo.tos.checked){
message += "Tos not checked.";
document.getElementById("Error").innerHTML = message;
window.document.userinfo.tos.focus();
var error = true;
} else {
document.getElementById("Error").innerHTML = "";
}

if (window.document.userinfo.pswrd.value != window.document.userinfo.pswrd_1.value){
message += "Passwords are not egal.";
document.getElementById("Error").innerHTML = message;
window.document.userinfo.pswrd.focus();
var error = true;
} else {

document.getElementById("Error").innerHTML = "";
}

if (error == true) {
return false;
} else {
return true;
}

}

</script>
</head>

<body>

<tr>
<td colspan="2" class="table_header"><div class="warning" id="Error"></div> Personal Information</td>
</tr>

<tr>
<td class="menu_text"><div class="warning" id="fname"></div> First Name: </td>
<td class="menu_title"><input type="text" size="30" name="first_name" value=""></td>
</tr>

<tr>
<td class="menu_text"><div class="warning" id="company"></div> Company: </td>
<td class="menu_title"><input type="text" size="30" name="company" value=""></td>
</tr>

<tr>
<td class="menu_text"><div class="warning" id="addr01"></div> Address 1: </td>
<td class="menu_title"><input type="text" size="30" name="addr_01" value=""></td>
</tr>

<tr>
<td class="menu_text">Address 2: </td>
<td class="menu_title"><input type="text" size="30" name="addr_02" value=""></td>
</tr>

<tr>
<td class="menu_text"><div class="warning" id="state"></div> State: </td>
<td class="menu_title"><input type="text" size="30" name="state" value=""></td>
</tr>

<tr>
<td class="menu_text">Country: </td>
<td class="menu_title">
<select name="country">
<option value="United States">United States</option>
<option value="Canada">Canada</option>
</select>
</td>
</tr>

<tr>
<td class="menu_text"><div class="warning" id="phone"></div> Phone: </td>
<td class="menu_title"><input type="text" size="30" name="phone" value=""></td>
</tr>

<tr>
<td colspan="2" class="table_header">User Account Information</td>
</tr>

<tr>
<td class="menu_text"><div class="warning" id="username"></div> Username: </td>
<td class="menu_title"><input type="text" name="username" size="30" value=""></td>
</tr>

<tr>
<td class="menu_text"><div class="warning" id="email"></div> Email: </td>
<td class="menu_title"><input type="text" name="email" size="30" value=""></td>
</tr>

<tr>
<td class="menu_text"><div class="warning" id="pswrd"></div> Password: </td>
<td class="menu_title"><input type="password" name="pswrd" size="30" value=""></td>
</tr>

<tr>
<td class="menu_text">Confirm Password: </td>
<td class="menu_title"><input type="password" name="pswrd_1" size="30" value=""></td>
</tr>

<tr>
<td colspan="2" class="no_border"><input type="checkbox" name="tos" value="1"> I accept and will follow all <a href="tos.php" target="_blank">Terms of Service</a></td>
</tr>

</table>
</form>

</body>
</html>

laserlight

sorry for asking this non-php relates question as I don't know somewhere else to ask.

We have a ClientSide Technologies forum, so I am moving this thread there.

AndreF

Ok, Thank you, That's better.

Anyway, not yet any answer to my question please? this is urgent for me. I appreciate if someone answer.

stijnm

With the countries you change the innerHTML of your select-field (thus removing all options), where for the other fields you just change the preceeding div.

It's probably not a good idea to give both this div and the field the same name. This seems to be working right, because the div has the id-property, and the field the name-property. getElementById finds the id of the div, but with the countries there is no div, so the method finds the name-property of your select field and removes it's options.

As for the problem with passwords, didn't find anything. Could you be more specific?

Mmmmkay?

AndreF

Thanks for trying to help. as about password comparison with tos cheched. Just try to submit the form blank when Tos is not checked. I expected to have a message "tos not checked" at the top of form. then try to have non-equal passwords in those two fields with tos checked. write 123456789 for one and leave the confirm field blank and check or uncheck the tos, now you get both messages for password comparison and tos check. the problem is that it doesn't honor tos check or uncheck status, if this is unchecked without password comparison problem, then no message about tos will be printed, when there is passsword comparison problem and tos is checked then both messages are printed as tos message should not be printed. got it?

now can you solve it?

as about countries where I should place the div? Do you mean this?
<div id=""blah"><select><option></option></select></div>

stijnm

the problem with the message is that you declare 'message' with 'var', so the variable is declared only once, not everytime you call to the function. Just replace var message = "" with message = "" (drop var), should solve your problem. Now the variable is set to be an empty string everytime the function is called to.

<div id=""blah"><select><option></option></select></div>

try <div id=""blah"></div><select><option></option></select>

With your version the whole select-field will disappear, as innerHTML sets new content for an entire element. But still ... Don't use the same names for both the divs and the fields. You never know what different browsers might make of that.

AndreF

I removed var and nothing changed! 🙁
would you please look at the issue deeper? I'll appreciate it.

AndreF

sorry I tested it again and noticed if password is not euqal but tos is checked, the message is fine, but if password is equal and tos is not checked, then both messages will be printed. any idea why?

stijnm

spic 'n span (i.e. cleaned up a bit)

<html>
<head>
<title>Registration Form Sample</title>
<style type="text/css">
.warning {
color: #AA0000;
}
</style>
<script language="javascript">

var message;
var error;

function submitform(){
	message = "";
	error = false;
	if (document.userinfo.first_name.value.length <= 1){
		document.getElementById("D_first_name").innerHTML = "-->";
		document.userinfo.first_name.focus();
		error = true;
	} else {
		document.getElementById("D_first_name").innerHTML = "";
	}
	if (document.userinfo.last_name.value.length <= 1){
		document.getElementById("D_last_name").innerHTML = "-->";
		document.userinfo.last_name.focus();
		error = true;
	} else {
		document.getElementById("D_last_name").innerHTML = "";
	} 
	if (document.userinfo.company.value.length <= 1){
		document.getElementById("D_company").innerHTML = "-->";
		document.userinfo.company.focus();
		error = true;
	} else {
		document.getElementById("D_company").innerHTML = "";
	}
	if (document.userinfo.addr_01.value.length <= 1){
		document.getElementById("D_addr01").innerHTML = "-->";
		document.userinfo.addr_01.focus();
		error = true;
	} else {
		document.getElementById("D_addr01").innerHTML = "";
	}
	if (document.userinfo.city.value.length <= 1){
		document.getElementById("D_city").innerHTML = "-->";
		document.userinfo.city.focus();
		error = true;
	} else {
		document.getElementById("D_city").innerHTML = "";
	}
	if (document.userinfo.state.value.length <= 1){
		document.getElementById("D_state").innerHTML = "-->";
		document.userinfo.state.focus();
		error = true;
	} else {
		document.getElementById("D_state").innerHTML = "";
	}
	if (document.userinfo.country.value.length <= 1){
		document.getElementById("D_country").innerHTML = "-->";
		document.userinfo.country.focus();
		error = true;
	} else {
		document.getElementById("D_country").innerHTML = "";
	}
	if (document.userinfo.zip.value.length <= 1){
		document.getElementById("D_zip").innerHTML = "-->";
		document.userinfo.zip.focus();
		error = true;
	} else {
		document.getElementById("D_zip").innerHTML = "";
	}
	if (document.userinfo.phone.value.length <= 8){
		document.getElementById("D_phone").innerHTML = "-->";
		document.userinfo.phone.focus();
		error = true;
	} else {
		document.getElementById("D_phone").innerHTML = "";
	}
	if (document.userinfo.username.value.length <= 8){
		document.getElementById("D_username").innerHTML = "-->";
		document.userinfo.username.focus();
		error = true;
	} else {
		document.getElementById("D_username").innerHTML = "";
	}
	if (document.userinfo.pswrd.value.length <= 8){
		document.getElementById("D_pswrd").innerHTML = "-->";
		document.userinfo.pswrd.focus();
		error = true;
	} else {
		document.getElementById("D_pswrd").innerHTML = "";
	}
	if (!document.userinfo.tos.checked){
		message += "Tos not checked.";
		document.userinfo.tos.focus();
		error = true;
	}
	if (document.userinfo.pswrd.value != document.userinfo.pswrd_1.value){
		message += "Passwords are not equal.";
		document.userinfo.pswrd.focus();
		error = true;
	}
	if (error) {
		document.getElementById("Error").innerHTML = message;
		return false;
	} else {
		document.getElementById("Error").innerHTML = "";
		return true;
	}

}

</script>
</head>

<body>


<form name="userinfo" id="userinfo" action="tmp.htm" method="POST" onSubmit="return submitform();">
<table cellspacing="1" class="bodyTable">

<tr>
<td colspan="2" class="table_header"><div class="warning" id="Error"></div>Personal Information</td>
</tr>

<tr>
<td class="menu_text"><div class="warning" id="D_first_name"></div> First Name: </td>
<td class="menu_title"><input type="text" size="30" id="first_name" value=""></td>
</tr>

<tr>
<td class="menu_text"><div class="warning" id="D_last_name"></div> Last Name: </td>
<td class="menu_title"><input type="text" size="30" id="last_name" value=""></td>
</tr>

<tr>
<td class="menu_text"><div class="warning" id="D_company"></div> Company: </td>
<td class="menu_title"><input type="text" size="30" id="company" value=""></td>
</tr>

<tr>
<td class="menu_text"><div class="warning" id="D_addr01"></div> Address 1: </td>
<td class="menu_title"><input type="text" size="30" id="addr_01" value=""></td>
</tr>

<tr>
<td class="menu_text">Address 2: </td>
<td class="menu_title"><input type="text" size="30" id="addr_02" value=""></td>
</tr>

<tr>
<td class="menu_text"><div class="warning" id="D_city"></div> City: </td>
<td class="menu_title"><input type="text" size="30" id="city" value=""></td>
</tr>

<tr>
<td class="menu_text"><div class="warning" id="D_state"></div> State: </td>
<td class="menu_title"><input type="text" size="30" id="state" value=""></td>
</tr>

<tr>
<td class="menu_text"><div class="warning" id="D_country"></div> Country: </td>
<td class="menu_title">
<select id="country">
<option value="United States">United States</option>
<option value="Canada">Canada</option>
</select> 
</td>
</tr>

<tr>
<td class="menu_text"><div class="warning" id="D_zip"></div> Zip Code: </td>
<td class="menu_title"><input type="text" size="30" id="zip" value=""></td>
</tr>

<tr>
<td class="menu_text"><div class="warning" id="D_phone"></div> Phone: </td>
<td class="menu_title"><input type="text" size="30" id="phone" value=""></td>
</tr>

<tr>
<td class="menu_text">Fax: </td>
<td class="menu_title"><input type="text" size="30" id="fax" value=""></td>
</tr>


<tr>
<td colspan="2" class="no_border">&nbsp;</td>
</tr>

<tr>
<td colspan="2" class="table_header">User Account Information</td>
</tr>

<tr>
<td class="menu_text"><div class="warning" id="D_username"></div> Username: </td>
<td class="menu_title"><input type="text" id="username" size="30" value=""></td>
</tr>

<tr>
<td class="menu_text"><div class="warning" id="D_email"></div> Email: </td>
<td class="menu_title"><input type="text" id="email" size="30" value=""></td>
</tr>

<tr>
<td class="menu_text"><div class="warning" id="D_pswrd"></div> Password: </td>
<td class="menu_title"><input type="password" id="pswrd" size="30" value=""></td>
</tr>

<tr>
<td class="menu_text">Confirm Password: </td>
<td class="menu_title"><input type="password" id="pswrd_1" size="30" value=""></td>
</tr>


<tr>
<td colspan="2" class="no_border"><input type="checkbox" id="tos" value="1"> I accept and will follow all <a href="tos.php" target="_blank">Terms of Service</a></td>
</tr>

<tr>
<td colspan="2" class="no_border">
<input type="hidden" id="level" value="1">
<input type="hidden" id="id" value="">
<br><input type="submit" id="submit" value=" Save " class="ButtonSubmit">
</td>
</tr>

</table>
</form>

</body>
</html>

AndreF

just a short note to thank you a lot for taking the time for kind helps.
I would set this thread as resolved! 🙂