jquery validation stop validating

jquery validation stop validating

 i have a form that uses jquery and jquery-validation. the validation sort of works for some and doesn't work for some. it supposed to work for all "required" but it doesn't validated properly. you can submit the form without entering all fields although all the fields are required. all include files are from jquery.com.

many thanks for your help

here is my code:

[code]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
  <title>Simple Form Validation</title>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="jquery.validate.js"></script>

  <script type="text/javascript">
  jQuery.validator.addMethod("phoneUS", function(phone_number, element) {
    phone_number = phone_number.replace(/\s+/g, "");
    return this.optional(element) || phone_number.length > 9 &&
        phone_number.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/);
}, "Please specify a valid phone number");

// Addon method for validating postal codes. Valid
// formats are (X1X 1X1) or (X1X1X1) or (X1X-1X1).
$.validator.addMethod("postalCode", function(value) {
     return value.match(/^[a-zA-Z][0-9][a-zA-Z](-| )?[0-9][a-zA-Z][0-9]$/);
}, 'Please enter a valid postal code');

 
 
    $(document).ready(function() {
      $("#form1").validate({
        rules: {
          firstName: "required",// simple rule, converted to {required:true}
          lastName: "required",
          email: {// compound rule
          required: true,
          email: true,
          remote: "checkAddress.php"
        },       
        password: "required",
        verify: {
        equalTo: "#password"
        },
        address1: "required",
        city: "required",
        province: "required",
        postal: {
        required: true,
        postalCode: true
        },
        phone: {
        required: true,
        phoneUS: true
        },
        cell: {
        phoneUS: true
        },
        dob: {
        required: true,
        date: true
        },
       
       
        captcha_code: {
            required: true,
            captcha_code: true,
            remote: "checkCaptcha.php"       
        }   
       
        },
        messages: {
           email:{
                remote: "This email is already registered! One registration per email address."
            },
            captcha_code:{
                remote: "Enter the right captcha value!."
            }

        }

      });
    });
  </script>

  <style type="text/css">
    * { font-family: Verdana; font-size: 11px; line-height: 14px; }
    .submit { margin-left: 125px; margin-top: 10px;}
    .label { display: block; float: left; width: 120px; text-align: right; margin-right: 5px; }
    .form-row { padding: 5px 0; clear: both; width: 700px; }
    label.error { width: 250px; display: block; float: left; color: red; padding-left: 10px; }
    input[type=text], textarea { width: 250px; float: left; }
    textarea { height: 50px; }
  </style>
  </head>

  <body>
    <form id="form1" method="post" action="<?php print $_SERVER['PHP_SELF']; ?>">
      <div class="form-row"><input type="text" name="firstName" size="30"/><span class="label">First Name *</span></div>
      <div class="form-row"><input type="text" name="lastName" size="30"/><span class="label">Last Name *</span></div>
      <div class="form-row"><input type="text" remote="checkAddress.php" name="email" /><span class="label">E-Mail *</span></div>
      <div class="form-row"><input type="password" name="password" /><span class="label">Password</span></div>
      <div class="form-row"><input type="password" name="verify" /><span class="label">Verify Password</span></div>
           
      <div class="form-row"><input type="text" name="address1" /><span class="label">Address 1 *</span></div>
      <div class="form-row"><input type="text" name="address2" /><span class="label">Address 2*</span></div>
      <div class="form-row"><input type="text" name="city" /><span class="label">City *</span></div>
      <div class="form-row"><input type="text" name="province" /><span class="label">Province *</span></div>
      <div class="form-row"><input type="text" name="postal" /><span class="label">Postal Code *</span></div>
      <div class="form-row"><input type="text" name="phone" /><span class="label">Phone *</span></div>
<div class="form-row"><input type="text" name="cell" /><span class="label">Cell Phone </span></div>
     
      <div class="form-row"><input type="text" name="dob" /><span class="label">Date of Birth *</span></div>
     
       <div class="form-row"><input name="offers" type="checkbox"  value="offers" tabindex="1" /><span class="label">I would like to receive details of future Globe and Mail offers.</span></div>
     
     
       <div class="form-row"><input name="terms" type="checkbox"  value="terms" tabindex="1" /><span class="label">I agree to the terms of the rules and regulations</span></div>   
     
     
      <div class="form-row"><span class="label">
      <img id="captcha" src="securimage/securimage_show.php" alt="CAPTCHA Image" />
                               <input type="text" remote="checkCaptcha.php" name="captcha_code" size="6" maxlength="6" />
                               <a href="#" onclick="document.getElementById('captcha').src = 'securimage/securimage_show.php?' + Math.random(); return false">Reload Image</a>
      </div>                    
      <div class="form-row"><input type="submit" value="submit" name="submit"></div>
    </form>
  </body>
</html>
























































































































[/code]