Image

Imagegigi_bobbsey wrote in Imagejavascript

Validation help!

Can someone please help me with this JavaScript. I have some of the validation done, but I don't know how to finish it.
I have the following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style class="text/css">
function validate_form ( )
{
    valid = true;
    if ( document.contact_form.books.selectedIndex == 0 )
    {
        alert ( "Please select your book." );
        valid = false;
    }
if ( document.contact_form.Qyt.value == "" )
    {
        alert ( "Please fill in the 'Qty' box." );
        valid = false;
   }
if ( ( document.contact_form.newsletter[0].checked == false )
    && ( document.contact_form.newsletter[1].checked == false ) )
    {
        alert ( "Please indicate whether or not you want a free subscription to the newsletter" );
        valid = false;
   }
if ( document.contact_form.information.selectedIndex == 0 )
    {
        alert ( "Please select an option from the Free Information Book List." );
        valid = false;
    }     
if ( document.contact_form.name.value == "" )
    {
        alert ( "Please fill in the 'Name' box." );
        valid = false;
    }     
if ( document.contact_form.address.value == "" )
    {
        alert ( "Please fill in the 'Address' box." );
        valid = false;
    }   
if ( document.contact_form.zipcode.value == "" )
    {
        alert ( "Please fill in the 'ZipCode' box." );
        valid = false;
    }
   
if ( document.contact_form.state.value == "" )
    {
        alert ( "Please fill in the 'State' box." );
        valid = false;
    }    
if ( document.contact_form.phone.value == "" )
    {
        alert ( "Please fill in the 'Phone' box." );
        valid = false;
    }
  if ( document.contact_form.email.value == "" )
    {
        alert ( "Please fill in the 'Email' box." );
        valid = false;
    }
        return valid;
    }
</style>
</head>
<body>
<form name="order_form" method="post" onsubmit="return validate_form ( );">
<div class="container">
<div class="basic">Online Bookstore</div>
<div class="formHoldersL">Select the book</div>
<div class="formHoldersR"><select name="books">
<option>Javascript Book</option>
<option>Javascript Book</option>
<option>Javascript Book</option>
<option>Javascript Book</option>
</select></div>
<div class="clear"></div>
<div class="formHoldersL">Qty</div>
<div class="formHoldersR"><input name="Qty" type="text" size="20" /></div>
<div class="clear"></div>
<div class="formHoldersL">Do you want a free subscription to the newsletter?</div>
<div class="formHoldersR"><input name="newsletter" type="radio" value="yes" checked /> Yes <input name="newsletter" type="radio" value="no"  /> No

<p>&nbsp;</p></div>
<div class="clear"></div>
<div class="formHoldersL">Free Information Book List:</div>
<div class="formHoldersR"><select name="information" size="5" multiple>
<option>Internet Books</option>
<option>Programming Languages</option>
<option>Networking Books</option>
<option>Networking Books</option>
<option>Networking Books</option>
<option>Networking Books</option>
</select></div>
<div class="clear"></div>
<div class="basic">Delivery Information</div>
<div class="clear"></div>
<div class="formHoldersL">Name</div>
<div class="formHoldersR"><input name="name" type="text" size="20" /></div>
<div class="clear"></div>
<div class="formHoldersL">Address</div>
<div class="formHoldersR"><input name="address" type="text" size="20" /></div>
<div class="clear"></div>
<div class="formHoldersL">ZipCode</div>
<div class="formHoldersR"><input name="zipcode" type="text" size="20" /></div>
<div class="clear"></div>
<div class="formHoldersL">State</div>
<div class="formHoldersR"><input name="state" type="text" size="20" /></div>
<div class="clear"></div>
<div class="formHoldersL">Phone</div>
<div class="formHoldersR"><input name="phone" type="text" size="20" /></div>
<div class="clear"></div>
<div class="formHoldersL">Email</div>
<div class="formHoldersR"><input name="email" type="text" size="20" /></div>
<div class="clear"></div>
<div class="button"><input type="submit" value="Submit"/><input type="reset" /></div>
<div class="clear"></div>
</form>
</body>
</html>


Please ignore all of the div classes. I'm using those to format it later. Anyways, when someone presses the submit button, I need to validate that none of the following are left blank:
name, address, state, zipcode, phone number, email address.
I also need to validate that the email address is 5 or more characters long, the email has a period in it, there is at least 3 letters after the period, that a book has been selected from the "select the book" drop down menu, and the Qty is at least 1. I need everything to pop up in one box. Also, if everything is filled out correctly, I need to display a message confirming the book selection and the number of books.

LJ Video