Form Submitting Despite jQuery Validate

Form Submitting Despite jQuery Validate

I am using jQuery to submit a form on my .aspx page.  I am using jquery.form.js, jquery.validate.pack.js.  When the form is submitted, I am using a web handler to process the form and send an email.  The validation is working, but the form submits regardless if the required fields are filled in or not. 
 
Can someone please point out what I am missing?  Thanks in advance
 
contact.js:

  1. $(document).ready(

    function() {

    var options = {

    url:

    "http://localhost/CTS/2010 Design/ContactHandler.ashx",

    success:

    function(result) {

    $(

    "#dThinking").hide();

    $(

    "#ContactResponse").show();

    //alert(result);

    },

    submit:

    function() {

    $(

    "#dMakeContact").hide();

    $(

    "#dThinking").show();

    }

    };

    $(

    "#ContactForm").ajaxForm(options);

    $(

    "#dThinking").hide();

    $(

    "#ContactResponse").hide();

    $(

    "input.PhoneMask").mask("(999) 999-9999");

    $(

    '.error').hide();

    $(

    "#ContactForm").validate();

    });

HTML page:

  1. <

    form id="ContactForm" action="contact.aspx" method="post">

    <fieldset id="contactform">

    <legend>Contact CTS via the form below:</legend>

    <div id="dMakeContact" class="group">

    <table border="0" width="98%" cellpadding="3" cellspacing="5" style="margin: 20px 0 0 0px;">

    <tr>

    <td valign="bottom" align="right" style="width:32%">

    <div class="FormTitle">

    Name:

    &nbsp;

    </div>

    </td>

    <td valign="top">

    <input id="txtName" name="txtName" maxlength="200" class="Form required" style="width: 200px;" />

    <span class="Highlight">*</span>

    </td>

    </tr>

    <tr>

    <td valign="bottom" align="right">

    <div class="FormTitle">

    Company:

    &nbsp;

    </div>

    </td>

    <td valign="top">

    <input id="txtCompany" name="txtCompany" maxlength="200" class="Form" style="width: 200px;" />

    </td>

    </tr>

    <tr>

    <td valign="bottom" align="right">

    <div class="FormTitle">

    Email Address:

    &nbsp;

    </div>

    </td>

    <td valign="top">

    <input id="txtEmail" name="txtEmail" maxlength="200" class="Form required email" style="width: 200px;" />

    <span class="Highlight">*</span>

    </td>

    </tr>

    <tr>

    <td valign="bottom" align="right">

    <div class="FormTitle">

    Phone Number:

    &nbsp;

    </div>

    </td>

    <td valign="top">

    <input id="txtPhone" name="txtPhone" maxlength="200" class="Form phone PhoneMask" style="width: 200px;" />

    </td>

    </tr>

    <tr>

    <td valign="bottom" align="right">

    <div class="FormTitle">

    Request Category:

    &nbsp;

    </div>

    </td>

    <td valign="top">

    <select id="ddlCategory" name="ddlCategory" class="Form required">

    <option value="">-- Select --</option>

    <option value="Request for Quote">Request for Quote</option>

    <option value="Website Information">Website Information</option>

    <option value="Support Inquiry">Support Inquiry</option>

    <option value="Support Contract">Support Contract</option>

    <option value="Network Setup">Network Setup</option>

    <option value="Email">Email</option>

    <option value="Graphic Design">Graphic Design</option>

    <option value="Other">Other</option>

    </select><span class="Highlight">*</span>

    </td>

    </tr>

    <tr>

    <td valign="bottom" align="right">

    <div class="FormTitle">

    Subject:

    &nbsp;

    </div>

    </td>

    <td valign="top">

    <input id="txtSubject" name="txtSubject" maxlength="200" class="Form required" style="width: 200px;" />

    <span class="Highlight">*</span>

    </td>

    </tr>

    <tr>

    <td valign="top" align="right">

    <div class="FormTitle">

    Request:

    &nbsp;

    </div>

    </td>

    <td valign="top">

    <textarea id="txtRequest" name="txtRequest" class="Form required" cols="200" rows="10" style="width: 200px;"></textarea>

    <span class="Highlight">*</span>

    </td>

    </tr>

    <tr>

    <td valign="top" colspan="2">

    <input type="submit" name="btnSubmit" id="btnSubmit" class="Button" value="Send" />

    </td>

    </tr>

    </table>

    </div>

    <div id="dThinking" class="Highlight">

    <br />

    <br />

    <p>

    <span>Sending.... </span>

    </p>

    </div>

    <div id="ContactResponse">

    <p>

    Thanks!

    </p>

    <p>

    Your request has been received and will be responded to shortly.

    </p>

    </div>

    </fieldset>

    </form>