Validating Forms

[Drezard]

Hello, I have a HTML form with a few fields. I want to make sure that the user fills in all of the forms. I want it done in the way that most websites do it though. Like when the user doesn't enter something into a field and then presses Submit, I want the web page to throw back an error where it highlights the field and at the top of the form it says "Please file in <field>" and displays the form. How do I do this using JavaScript. 

Thanks, Daniel

[tomfmason]

You should google it. [url=http://www.google.com/search?sourceid=navclient&aq=t&ie=UTF-8&rls=GGLJ,GGLJ:2006-38,GGLJ:en&q=javascript+form+validation]javascript form validation[/url]

[JackW]

Put something like this in the head section:

<!-- Script goes here -->
<script type="text/javascript"language="JavaScript1.2">


/* Validate an Email address */
function validateEmail(emailString)
{

/* The characters don't belong in a valid email address */
invalidChars = " /:,;";

/* You must enter something */
if (emailString == "")
{
window.alert("Please enter a valid email address!");
return false;
}

/* There must be something BEFORE the at sign */
if (emailString.indexOf("@", 0) == 0)
{
window.alert("Please enter a valid email address!");
return false;
}

/* There must be an at sign at, or after, the second character */
if (emailString.indexOf("@", 1) == -1)
{
window.alert("Please enter a valid email address!");
return false;
}

/* There must be a period somewhere */
if (emailString.indexOf(".", 0) == -1)
{
window.alert("Please enter a valid email address!");
return false;
}

/* Check for invalid characters */
for (i=0; i<invalidChars.length; i++)
{
if (emailString.indexOf(invalidChars.charAt(i), 0) > -1)
{
window.alert("Bad character(s) in email address!",
invalidChars.charAt(i), i);
return false;
}
}

/* We made it! The email looks good! */
return true;
}

/* Verify a form */
function formVerify(join)
{

/* Check that the user entered a city */
if (join.first.value == "")
{
window.alert("You must enter your first name");
join.first.focus();
join.first.select();
return false;
}
/* Check that the user entered a last name */
if (join.last.value == "")
{
window.alert("You must enter your last name");
join.last.focus();
join.last.select();
return false;
}
/* Check that the user entered an address */
if (join.address.value == "")
{
window.alert("You must enter your address");
join.address.focus();
join.address.select();
return false;
}
/* Check that the user entered a city */
if (join.city.value == "")
{
window.alert("You must enter your city");
join.city.focus();
join.city.select();
return false;
}
/* Check that the user entered a Zip Code */
if (join.zip.value == "")
{
window.alert("You must enter your zip code");
join.zip.focus();
join.zip.select();
return false;
}
/* Check that the user entered a phone number */
if (join.phone.value == "")
{
window.alert("You must enter your phone number");
join.phone.focus();
join.phone.select();
return false;
}
/* Check that the user entered a user name */
if (join.contact.value == "")
{
window.alert("You must enter your user name");
join.contact.focus();
join.contact.select();
return false;
}
/* Check that the user entered a name */
if (join.pass.value == "")
{
window.alert("You must enter your password");
join.pass.focus();
join.pass.select();
return false;
}

/* Go validate the email address */
else if(!validateEmail(join.email.value))
{
join.email.focus();
join.email.select();
return false;
}

else
return true;
}


</script>

Then start your form something like this:

<form name="join" onSubmit="return formVerify(this)" action="customerjoin.php" method="post">

That works for my join form.  You will need to modify it to suit your needs.

Jack