Validating a Form

form validation

[emmax64]

New to javascript....I need to validate a form. This is what I have so far.

<script type="text/javascript">
<!--

function validate_form()
{
valid=true;
if (document.adoptform.selectPet.selectedIndex ==0){
alert ("Please slect the type pet you want to adopt.");
valid=false;}

if (document.adoptform.firstname.value==""){
alert ("Please enter your first name.");
valid=false;}

if (document.adoptform.lastname.value==""){
alert ("Please enter your last name.");
valid=false;}

if (document.adoptform.address1.value==""){
alert ("Please enter your address.");
valid=false;}

if (document.adoptform.city.value==""){
alert ("Please enter the city.");
valid=false;}

if (document.adoptform.state.value==""){
alert ("Please enter the state name.");
valid=false;}

if (document.adoptform.zip.value==""){
alert ("Please enter your zip code.");
valid=false;}

if (document.adoptform.creditcard.selectedIndex==0){
alert ("Please select a credit card type.");
valid=false;}

if (document.adoptform.cardnumber.value==""){
alert ("Please enter your credit card number.");
valid=false;}

if (document.adoptform.securitycode.value==""){
alert ("Please enter your credit card security code.");
valid=false;}

return valid;}
//-->

</script>

The form html is:
<form name="adoptform" method="post" enctype="text/plain" action="mailto:[e-mail]">

<p><span class="style1">Please select the type(s) of animal(s) you would like to adopt:</span>
<p>
<select name="selectPet" id="selectPet">
<option value="dog">Dog</option>
<option value="puppy">Puppy (under 1yr old)</option>
<option value="cat">Cat</option>
<option value="kitten">Kitten (under 1yr old)</option>
<option value="snake">Snake</option>
<option value="lizard">Lizard</option>
<option value="turtle">Turtle</option>
<option value="bird">Bird</option>
</select>
</label>

<br>
<p>
<span class="style1">First Name:</span>
<input type="text" name="firstname" size="25">
<span class="style1">Middle Initial:</span>
<input type="text" name="middleinitial" size="3">
<span class="style1">Last Name:</span>
<input type="text" name="lastname" size="30">
</p>
<p>
<span class="style1">Address 1:</span>
<input type="text" name="address1" size="65">
<span class="style1">Apt:</span>
<input type="text" name="apartment" size="10">
</p>
<p>
<span class="style1">Address 2:</span>
<input type="text" name="address2" size="65">
</p>
<p>
<span class="style1">City:</span>
<input type="text" name="city" size="45">
</p>

<p>
<span class="style1">State:</span>
<input type="text" name="state" size="4">
<span class="style1">Zip:</span>
<input type="text" name="zip" size="10">
<span class="style1"> - </span>
<input type="text" name="code" size="6">
</p>
<p>
<span class="style1">Credit Card:</span>
<select name="CreditCard" size="1">
<option value="Discover">Discover</option>
<option value="Mastercard">Mastercard</option>
<option value="Visa">Visa</option>
<option value="American Express">American Express</option>
</select>
<span class="style1">Card Number:</span>
<input type="text" name="cardnumber" size="25" maxlength="16">
<span class="style1">Security Code:</span>
<input type="text" name="securitycode" size="6" maxlength="4">
</p>
<p class="style1">If you have any other comments, questions or concerns please write them in the area below.</p>
<textarea name="comments" rows="10" cols="90" wrap="hard"></textarea>
<br>

<br><input type="submit" value="Submit"/>&nbsp;&nbsp;<input type="reset" name="reset" value="Reset">

</form>

If any field is left blank or not selected you should receive an error message to correct that field. I want the error messages to run when the user clicks Submit.

Can anyone help me fix this?

Thanks in advance for the help!

[edited by: DrDoc at 11:12 pm (utc) on July 31, 2008]
[edit reason] Removed specifics [/edit]

[gergoe]

You're almost there, just missing one piece of the puzzle: you have to connect your javascript function (validate_form) to the "submitting process" of the HTML form. To do this, use the

<form />

's

onsubmit

attribute, like this:

<form name="adoptform" method="post" enctype="text/plain" action="mailto:[e-mail]" onsubmit="return validate_form();">

Note that I removed an extra double quotation mark from between mailto: and [e-mail], which you seem to left there.

[emmax64]

Excellent! Thanks for the help. I thought I was pretty close.

Thanks again!

[Fotiman]

2 comments:
1. Remove the HTML comments within your script tags. It's a bad habit that is not needed.

<script type="text/javascript"> 
<!-- 
... 
//--> 
</script>  

becomes

<script type="text/javascript"> 
... 
</script>  

2. Declare your 'valid' variable with var inside your function, otherwise you're creating a global variable:

function validate_form()
{
var valid=true;

[emmax64]

Thank you Fotiman for your reply. I ended the script as you suggested and made note to not use the HTML comments within the script tags.

Thanks again!