SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2012
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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


    Code:
    <!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>
    Last edited by TechnoBear; Jun 1, 2012 at 08:26. Reason: Code tags added

  2. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rick Sebastian View Post
    I am having a problem getting the JavaScript in our HTML doc to validate the form
    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.
    Tab-indentation is a crime against humanity.

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2012
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I didn't realize it quickly, but I figured it out eventually!

    Thanks for the help!!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •