Help for a JavaScript Moron

[betheball]

As you will see this is my first post. I have been fighting with setting up form validation for days and am hoping someone here can relieve my headache. The script below doesn't validate anything. The form simply submits even if all the fields are blank. My JScript experience is about one hour. Please forgive the lenght of the post as the code is quite lengthy. In my form tag I have placed this:

onSubmit="check(this)"

Here is what I placed in the HEAD, please point out my error(s)

<script Language="JavaScript" Type="text/javascript">
<!--Begin
function check(theForm){
if (theForm.UserName.value == "")
{
alert("Please enter a value for the \"User Name\" field.");
theForm.UserName.focus();
return (false);
}

if (theForm.UserName.value.length < 5)
{
alert("Please enter at least 5 characters in the \"User Name\" field.");
theForm.UserName.focus();
return (false);
}

if (theForm.UserName.value.length > 12)
{
alert("Please enter at most 12 characters in the \"User Name\" field.");
theForm.UserName.focus();
return (false);
}

if (theForm.Password.value == "")
{
alert("Please enter a value for the \"Password\" field.");
theForm.Password.focus();
return (false);
}

if (theForm.Password.value.length < 6)
{
alert("Please enter at least 6 characters in the \"Password\" field.");
theForm.Password.focus();
return (false);
}

if (theForm.Password.value.length > 12)
{
alert("Please enter at most 12 characters in the \"Password\" field.");
theForm.Password.focus();
return (false);
}

if (theForm.Password_Confirm.value == "")
{
alert("Please enter a value for the \"Confirm Password\" field.");
theForm.Password_Confirm.focus();
return (false);
}

if (theForm.Password_Confirm.value.length < 6)
{
alert("Please enter at least 6 characters in the \"Confirm Password\" field.");
theForm.Password_Confirm.focus();
return (false);
}

if (theForm.Password_Confirm.value.length > 12)
{
alert("Please enter at most 12 characters in the \"Confirm Password\" field.");
theForm.Password_Confirm.focus();
return (false);
}
if(/\s/.test(theForm.password.value))
{
alert("Sorry, spaces aren't allowed in the password.");
return false;
}
if(theForm.Password.value!=theForm.Password_Confirm.value)
{
alert("Passwords don't match");
return false;
}
if (theForm.Email.value == "")
{
alert("Please enter a value for the \"Email\" field.");
theForm.Email.focus();
return (false);
}

if (theForm.T13.value == "")
{
alert("Please enter a value for the \"Confirm Email\" field.");
theForm.T13.focus();
return (false);
}
if(theForm.Email.value!=theForm.T13.value)
{
alert("Passwords don't match");
return false;
}
if(/^\w+@\w+(\.\w{1,6}){0,1}$/i.test(theForm.Email.value)){
if(!/ ^(com|net|org|edu|int|mil|gov|arpa|biz|aero|name|c
oop|info|pro|museum)$/.test(theForm.Email.value.split('.')[1])){ //put on above line
alert("Your e-mail address must end in a well-known domain or two letter country.");
return false;
}
}else{
alert("Please put your e-mail in this format: you@yourdomain.ext");
return false;
}
if (theForm.FName.value == "")
{
alert("Please enter a value for the \"First Name\" field.");
theForm.FName.focus();
return (false);
}

if (theForm.LName.value == "")
{
alert("Please enter a value for the \"Last Name\" field.");
theForm.LName.focus();
return (false);
}

if (theForm.Address1.value == "")
{
alert("Please enter a value for the \"Address\" field.");
theForm.Address1.focus();
return (false);
}
if (theForm.State.selectedIndex == 0)
{
alert("The first \"State\" option is not a valid selection. Please choose one of the other options.");
theForm.state.focus();
return (false);
}

if (theForm.Country.selectedIndex == 0)
{
alert("The first \"Country\" option is not a valid selection. Please choose one of the other options.");
theForm.Country.focus();
return (false);
}

if (theForm.DOB1.selectedIndex == 0)
{
alert("The first \"Date of Birth - Month\" option is not a valid selection. Please choose one of the other options.");
theForm.DOB1.focus();
return (false);
}

if (theForm.DOB2.selectedIndex == 0)
{
alert("The first \"Date of Birth - Day\" option is not a valid selection. Please choose one of the other options.");
theForm.DOB2.focus();
return (false);
}
if (theForm.DOB3.selectedIndex == 0)
{
alert("The first \"Date of Birth - Year\" option is not a valid selection. Please choose one of the other options.");
theForm.DOB3.focus();
return (false);
}

var radioSelected = false;
for (i = 0; i < theForm.Gender.length; i++)
{
if (theForm.Gender[i].checked)
radioSelected = true;
}
if (!radioSelected)
{
alert("Please select one of the \"Gender\" options.");
return (false);
}

if (theForm.Time_Difference.selectedIndex == 0)
{
alert("The first \"Time Zone Difference\" option is not a valid selection. Please choose one of the other options.");
theForm.Time_Difference.focus();
return (false);
}
return true;
}
// End -->
</script>

[karayan]

Are you certain that the script even executes on submit? Put an alert() at the beginning to make sure. (I would have trapped the onClick event of the submit button of the form, incidentally.)

The logic of the first if statement looks OK, so if the script runs without errors, something is very wrong. You may want to try referencing the form directly. Rather than passing it as an argument, give it name (in the form tag) and refer to it in the check() function as document.myForm.UserName.value, etc.

If the function does NOT run on submit, I'm not sure why. Try trapping the onClick of the submit button instead.

[betheball]

Are you certain that the script even executes on submit? Put an alert() at the beginning to make sure. (I would have trapped the onClick event of the submit button of the form, incidentally.)

I am not certain. However, I have done very little with Javascript. How do I put an alert() at the beginning? What would be the syntax.


You may want to try referencing the form directly. Rather than passing it as an argument, give it name (in the form tag) and refer to it in the check() function as document.myForm.UserName.value, etc.

Do I change the name of the funtion itself or just the various arguments? I am guessing you are saying instead of if(formElement.Password.value.length, i would use myForm.Password.value.length, right? When you say Document.myForm, do I put "Document" literally, or the name of my page?

I have modified the script a little and here is the entire HEAD of my page:

<head>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function check(formElement){
if(formElement.Password.value.length<5){
alert("Password must be at least 5 characters long.");
return false;
}
if(/\s/.test(formElement.Password.value)){
alert("Sorry, spaces aren't allowed in the password.");
return false;
}
if(formElement.Password.value!=formElement.Password_Confirm.value){
alert("Passwords don't match");
return false;
}
if(/^\w+@\w+(\.\w{1,6}){0,1}$/i.test(formElement.Email.value)){
if(!/ ^(com|net|org|edu|int|mil|gov|arpa|biz|aero|name|c
oop|info|pro|museum)$/.test(formElement.Email.value.split('.')[1])){ //put on above line
alert("Your e-mail address must end in a well-known domain or two letter country.");
return false;
}
}else{
alert("Please put your e-mail in this format: you@yourdomain.ext");
return false;
}
return true;
}
// End -->
</script>

<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Axis-One Registration Form</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />

</head>

Here are the lines for my form and my submit button:

<form method="POST" action="register4.asp">

<input type="submit" onClick="check(this)" value="Submit" name="B1"><input type="reset" value="Reset" name="B2">

[betheball]

I have simplified this yet again and am making progress. The script now executes, but once the user clicks OK, to the error-message the form then submits before the user gets a chance to correct the field where the error occured. Here is the code for the entire page:

<html>

<head>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function check(myForm){
if(document.myForm.Password.value.length<5){
alert("Password must be at least 5 characters long.");
return false;
}
if(/\s/.test(document.myForm.Password.value)){
alert("Sorry, spaces aren't allowed in the password.");
return false;
}
if(document.myForm.Password.value!=document.myForm.Password_Confirm.value){
alert("Passwords don't match");
return false;
}
return true;
}
End -->
</script>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Password</title>
</head>

<body>

<form method="POST" action="default.asp" name="myForm">
<input TYPE="hidden" NAME="VTI-GROUP" VALUE="0">
<p>Password <input type="text" name="Password" size="20"></p>
<p>Password2 <input type="text" name="Password_Confirm" size="20"></p>
<p>Email <input type="text" name="Email" size="20"></p>
<p><input type="Submit" value="Go!" name="B1" onClick="check(this)"><input type="reset" value="Reset" name="B2"></p>
</form>

</body>

</html>

[Khalid Ali]

just change your submit buttons onclick event from

onclick="check(this)"


to this

onclick="return check(this)"

[betheball]

No good. Still submits. You can see what I mean at:

http://www.thatswhatido.net/javatest.asp

Could it be because the page has a .asp extension? I just resaved the page as .htm and the problem went away. However, this is just a test page and the page where I will really use this will have to be .asp. Are there conflicts between javascript and .asp?