Problems with JavaScript Form Validation

Hi all. Relatively new to the forums, and I hope I’m posting this in the right place.

I am having a problem getting the JavaScript in our HTML doc to validate the form inside the HTML code. (I hope I explained that right)

We have 3 <fieldset>'s inside the doc to separate data. According to the W3C validator, the </form> tag MUST come at the end of the first </fieldset> entry. Obviously, that will not allow the script to pick up the remaining 2 sections of the form data.

Having said that, even if I do put the </form> tag at the very end, the best I’ve been able to accomplish is to get the “Submit” button to generate a blank e-mail with all of the form fields included. It simply will NOT validate the form before it generates the e-mail regardless of where I put the </form> tag.

So I am at a complete loss.

If someone could take a look at the code and give me some pointers I would be greatly appreciative.

I don’t see any way to attach the file, so I hope it’s okay to copy and paste the code into the bottom of this message. I apologize in advance if that’s an issue.

Rick


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 

<html>


<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="kudler fine foods, kudler,bakery , pastry, fresh produce, organic, fresh meat, fresh seafood, 
condiments, packaged foods, cheese, specialty dairy products" >
<meta name="description" content="Kudler Fine Foods" >
<title>Kudler Ecommerce Sampler</title>

<link rel="stylesheet" type="text/css" href="base_test.css">
<style type="text/css">
hr {height:2px}		
</style>

<script type="text/javascript">
function validateForm()
{
var x=document.forms["order"]["lastname"].value;
if (x==null || x=="")
  {
  alert("Last name must be filled out");
  return false;
  }
var x=document.forms["order"]["firstname"].value;
if (x==null || x=="")
  {
  alert("First name must be filled out");
  return false;
  }
var x=document.forms["order"]["address"].value;
if (x==null || x=="")
  {
  alert("Street address must be filled out");
  return false;
  }
var x=document.forms["order"]["city"].value;
if (x==null || x=="")
  {
  alert("City name must be filled out");
  return false;
  }
var x=document.forms["order"]["zip"].value;
if (x==null || x=="")
  {
  alert("Zip code must be filled out");
  return false;
  }
var x=document.forms["order"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
  {
  alert("Not a valid e-mail address");
  return false;
  }
}
var x=document.forms["order"]["cardnum"].value;
if (x==null || x=="")
  {
  alert("Credit card number must be filled out");
  return false;
  }
var x=document.forms["order"]["securitycode"].value;
if (x==null || x=="")
  {
  alert("Security must be filled out");
  return false;
  }
var x=document.forms["order"]["bzip"].value;
if (x==null || x=="")
  {
  alert("Billing zip code must be filled out");
  return false;
  }
}
</script> 
</head>

<body>

<div id="container">
<p><img class="topbanner" src="kudlerbanner.jpg" alt="Kudler Fine Foods!"></p>

     <h2>
      HOME&nbsp;&nbsp;|&nbsp;&nbsp;
      BAKERY&nbsp;&nbsp;|&nbsp;&nbsp;
      MEAT &amp; SEAFOOD&nbsp;&nbsp;|&nbsp;&nbsp;
      PRODUCE&nbsp;&nbsp;|&nbsp;&nbsp;
      CHEESE &amp; DAIRY&nbsp;&nbsp;|&nbsp;&nbsp;
      WINE&nbsp;&nbsp;|&nbsp;&nbsp;
      <a href="index.html">ORDERING</a>
      </h2>

<h1>Kudler E-commerce Order Page</h1>
</div>  

<p class="pagecontent">
     <big>Ordering products from Kudler Fine Foods is a 3-step process:</big><br><br>
     1. Fill out the form below with your shipping information.<br>
     2. Select your product from the drop-down menu.<br>
     3. Select your payment method.<br>
      </p>


<div style='height: 550px; width: 350px; border: 2px solid gray; float: left;'>  
<p><big>Step 1.</big></p>
<form name="order" action="mailto:kudlerordersummary@gmail.com" onsubmit="return validateForm()" method="post">

<div><img class="delivery" src="delivery.jpg" alt="Shipping Information!!">
	<p>(*Required Field)</p>

	<p class="normal">
	<label for="fname">*First Name:</label>
	<input name="textfield" type="text" id="fname" maxlength="30" >
	</p>

	<p class="normal">
	<label for="lname">*Last Name:</label>
	<input name="textfield" type="text" id="lname" maxlength="30" >
	</p>

	<p class="multi_field">
	<label for="address">*Street Address:</label>
	<input name="textfield" type="text" id="street" maxlength="40" >
	</p>

	<p class="normal">
	<label for="city">*City:</label>
	<input name="textfield" type="text" id="city" maxlength="30" >
	</p>
      
      	<p class="normal">
	<label for="state">State:</label>
	State:&nbsp;<select name="state">

          <option value="Select State">Select State</option>
          <option value="Alabama">Alabama</option>
          <option value="Alaska">Alaska</option>
          <option value="Arizona">Arizona</option>
          <option value="Arkansas">Arkansas</option>
          <option value="California">California</option>
          <option value="Colorado">Colorado</option>
          <option value="Connecticut">Connecticut</option>
          <option value="Delaware">Delawar</option>
          <option value="Florida">Florida</option>
          <option value="Georgia">Georgia</option>
          <option value="Hawaii">Hawaii</option>
          <option value="Idaho">Idaho</option>
          <option value="Illinois">Illinois</option>
          <option value="Indiana">Indiana</option>
          <option value="Iowa">Iowa</option>
          <option value="Kansas">Kansas</option>
          <option value="Kentucky">Kentucky</option>
          <option value="Louisiana">Louisiana</option>
          <option value="Maine">Maine</option>
          <option value="Maryland">Maryland</option>
          <option value="Massachusetts">Massachusetts</option>
          <option value="Michigan">Michigan</option>
          <option value="Minnesota">Minnesota</option>
          <option value="Mississippi">Mississippi</option>
          <option value="Missouri">Missouri</option>
          <option value="Montana">Montana</option>
          <option value="Nebraska">Nebraska</option>
          <option value="Nevada">Nevada</option>
          <option value="New Hampshire">New Hampshire</option>
          <option value="New Jersey">New Jersey</option>
          <option value="New Mexico">New Mexico</option>
          <option value="New York">New York</option>
          <option value="North Carolina">North Carolina</option>
          <option value="North Dakota">North Dakotaa</option>
          <option value="Ohio">Ohio</option>
          <option value="Oklahoma">Oklahoma</option>
          <option value="Oregon">Oregon</option>
          <option value="Pennsylvania">Pennsylvania</option>
          <option value="Rhode Island">Rhode Island</option>
          <option value="South Carolina">South Carolina</option>
          <option value="South Dakota">South Dakota</option>
          <option value="Tennessee">Tennessee</option>
          <option value="Texas">Texas</option>
          <option value="Utah">Utah</option>
          <option value="Vermont">Vermont</option>
          <option value="Virginia">Virginia</option>
          <option value="Washington">Washington</option>
          <option value="West Virginia">West Virginia</option>
          <option value="Wisconsin">Wisconsin</option>
          <option value="Wyoming">Wyoming</option>
          </select></p>

	<p class="normal">
	<label for="zip">*Zip Code:</label>
	<input name="textfield" type="text" id="zip" maxlength="5" >
	</p>

	<p class="multi_field">
	<label for="email">*Email Address:</label>
	<input name="textfield" type="text" id="email" maxlength="40" >
	</p>

      </div></div>

<div style='height: 550px; width: 350px; border: 2px solid gray; float: left;'> 
<p><big>Step 2.</big></p>
<div><img class="wine" src="wine.png" align-image="center" alt="Select Your Items!!">

      <p id="bakery"><select name="Bakery">
        <option value="Bakery">Bakery Selection</option>
        <option value="Sour Dough Rolls">Sour Dough Rolls</option>
        <option value="Bread">Bread</option>
        <option value="Chocolate Cake">Chocolate Cake</option>
        <option value="Assorted Dozen Doughnuts">Assorted Dozen Doughnuts</option>
        <option value="Cupcakes">Cupcakes</option>
        </select>&nbsp;&nbsp;
            Qty:&nbsp;<select name="qty">
                <option>0</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
                <option>6</option>
                <option>7</option>
                <option>8</option>
                <option>9</option>
                <option>10</option>
                <option>11</option>
                <option>12</option>
                <option>13</option>
                <option>15</option>
                <option>20</option>
                <option>99</option>
            </select>
        </p>
      <p id="meatandseafood"><select name="Meat and Seafood">
        <option value="Meat and Seafood">Meat and Seafood Selection</option>
        <option value="Filet Mignon">Filet Mignon</option>
        <option value="New York Strip">New York Strip</option>
        <option value="Chilean Sea Bass">Chilean Sea Bass</option>
        <option value="Copper River Salmon">Copper River Salmon</option>
        <option value="Halibut">Halibut</option>
        </select>&nbsp;&nbsp;
            Qty:&nbsp;<select name="qty">
                <option>0</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
                <option>6</option>
                <option>7</option>
                <option>8</option>
                <option>9</option>
                <option>10</option>
                <option>11</option>
                <option>12</option>
                <option>13</option>
                <option>15</option>
                <option>20</option>
                <option>99</option>
            </select>
        </p>
      <p id="Produce"><select name="Produce">
        <option value="Produce">Produce Selection</option>
        <option value="Asparagus">Asparagus</option>
        <option value="Broccoli">Broccoli</option>
        <option value="Pineapple">Pineapple</option>
        <option value="Apples - Red Delicious">Apples - Red Delicious</option>
        <option value="Serrano Peppers">Serrano Peppers</option>
        </select>&nbsp;&nbsp;
            Qty:&nbsp;<select name="qty">
                <option>0</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
                <option>6</option>
                <option>7</option>
                <option>8</option>
                <option>9</option>
                <option>10</option>
                <option>11</option>
                <option>12</option>
                <option>13</option>
                <option>15</option>
                <option>20</option>
                <option>99</option>
            </select>
        </p>
      <p id="cheeseanddairy"><select name="Cheese and Dairy">
        <option value="Cheese &amp; Dairy">Cheese and Dairy Selection</option>
        <option value="Cheddar - Extra Sharp Bandon">Cheddar - Extra Sharp Bandon</option>
        <option value="Cheddar - Sharp Tillamook">Cheddar - Sharp Tillamook</option>
        <option value="Milk - 2 Percent">Milk - 2 Percent</option>
        <option value="Milk - Non-Fat">Milk - Non-Fat</option>
        <option value="Yogurt - Oregon Strawberry">Yogurt - Oregon Strawberry</option>
        </select>&nbsp;&nbsp;
            Qty:&nbsp;<select name="qty">
                <option>0</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
                <option>6</option>
                <option>7</option>
                <option>8</option>
                <option>9</option>
                <option>10</option>
                <option>11</option>
                <option>12</option>
                <option>13</option>
                <option>15</option>
                <option>20</option>
                <option>99</option>
            </select>
        </p>
      <p id="Wine"><select name="Wine">
        <option value="Wine">Wine Selection</option>
        <option value="Chardonnay - Dry">Chardonnay - Dry</option>
        <option value="Pinot Noir">Pinot Noir</option>
        <option value="Cabernet Sauvignon">Cabernet Sauvignon</option>
        <option value="Merlot - Very Dry">Merlot - Very Dry</option>
        <option value="White Reisling">White Reisling</option>
        </select>&nbsp;&nbsp;
            Qty:&nbsp;<select name="qty">
                <option>0</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
                <option>6</option>
                <option>7</option>
                <option>8</option>
                <option>9</option>
                <option>10</option>
                <option>11</option>
                <option>12</option>
                <option>13</option>
                <option>15</option>
                <option>20</option>
                <option>99</option>
            </select>
        </p>

	<label>Your Order Total:</label><input name="ordertotal" type="text" size="8"><br><br>
</div></div>  
     
  
<div style='height: 550px; width: 350px; border: 2px solid gray; float: left;'>
<p><big>Step 3.</big></p>

<div><img class="cards" src="cards.gif" alt="Credit Cards Accepted!!">
	<p>(*Required Field)</p>
	<p id="cardtype"><label>*Card Type:</label><select name="cardtype">
          <option value="Visa">Visa</option>
          <option value="Master Card">Master Card</option>
	  <option value="Discover">Discover</option>
	  <option value="American Express">American Express</option>
      </select></p>
      <label>*Card Number: </label><input name="cardnum" type="text" size="20" ><br ><br >
      <label>*Security Code: </label><input name="securitycode" type="text" size="6" ><br ><br >
      <label>*Billing ZIP Code: </label><input name="bzip" type="text" size="10" ><br ><br>
      <label>Your Order Total With Tax and Shipping:</label><input name="ordertotal" type="text" size="10" ><br ><br >
	<p>
	<input name="Submit" type="submit" value="Submit" >
	<input name="Reset" type="reset" value="Reset" >
	</p>
</div>
</div>
 
 </form>    

  </div>   
  </div> 

<div class="contacts"> 
<p><big>Contacts</big></p>
 

    <fieldset id="contacts">
    <legend><b>Contacts</b></legend>

    Customer Support<br><br>
    Sales<br>
    General Information<br>
    Product Queries<br>
    Shipping Questions<br>
    Payment Queries<br><br>
    Marketing<br><br>
    Purchasing (Suppliers)<br><br>
    Careers<br><br>
    Public Liaison<br><br>
    Information Technology (Website Support)<br><br>
    <big>Main Office</big><br><br>
    La Jolla<br>
    Torrey Pines Rd. and Prospect Pl.<br>
    Rosen Shopping Center<br>
    La Jolla, CA  92037<br><br>
    (858) 555-0138<br>

</fieldset>

 <!-- page footer -->
<div id="footer" style="clear:all;width:1200">
<hr>
<h3>
We sincerely appreciate your business.<br>
Please come back soon and remember to visit one of our fine stores if you are in the neighborhood.<br>
</h3>
    <h5>
    HOME&nbsp;&nbsp;|&nbsp;&nbsp;
    BAKERY&nbsp;&nbsp;|&nbsp;&nbsp;
    MEAT &amp; SEAFOOD&nbsp;&nbsp;|&nbsp;&nbsp;
    PRODUCE&nbsp;&nbsp;|&nbsp;&nbsp;
    CHEESE &amp; DAIRY&nbsp;&nbsp;|&nbsp;&nbsp;
    WINE&nbsp;&nbsp;|&nbsp;&nbsp;
    <a href="index.html">ORDERING</a>&nbsp;&nbsp;|&nbsp;&nbsp;
    CONTACT US&nbsp;&nbsp;|&nbsp;&nbsp;
    SITE MAP&nbsp;&nbsp;|&nbsp;
    </h5>
    <h6 style="text-align:right">Copyright &copy; 2012 Learning Team A (Team Project, WEB237).  All rights reserved.</h6>
<p>
    <a href="http://validator.w3.org/check?uri=referer"><img
      src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88"></a>
  </p>
   </div>
<!-- end page footer -->



</body>
</html>

If you’re going to use JavaScript, you must use the error console. I recommend the one in FireFox.

The first error message you’ll see indicates that you have a return statement which is not inside a function. I’m sure you’ll soon realise why that is.

I didn’t realize it quickly, but I figured it out eventually!

Thanks for the help!!