使用codeigniter和ajax提交进行jQuery验证

Question

使用ajax提交表单时遇到了一个奇怪的问题。我的问题是我要验证表单然后在验证时使用ajax将数据传递给codeigniter控制器，然后返回包含新表单的新视图。

验证很好，但是当它传递给ajax时，它正在提交表单，我不知道为什么。它应该通过ajax并返回一个新视图来替换当前的div。请你告诉我哪里可能出错了？

CODE EDITED

这是我的html表单：

<div class="row">
<div class="col-sm-10 col-sm-offset-1">

    <!-- Wizard content -->

    <h3>Add Customer Details</h3>
    <p>Fill out the form below the select next. </p>

    </div>
    <div class="row">
        <div class="col-sm-10 col-sm-offset-1">

        <form action="" id="add_customer_form" method="post" novalidate="novalidate">
        <fieldset>
      <table style="width:100%;">
      <tr>
      <td>
      <div class="form-group">
      <label for="customername">Customer Name</label>

      <input type="text" class="form-control" id="customername" name="customername" placeholder="Customer Name" />

       </div>
       </td>

            <td></td>

      <td>
      <div class="form-group">
      <label for="town">Town or City</label>
      <input type="text" class="form-control" id="town" name="town" placeholder="Town/City" />
      </div>
      </td>

      </tr>
      <tr>

      <td>
      <div class="form-group">
      <label for="address1">Address Line 1</label>
      <input type="text" class="form-control" id="address1" name="address1" placeholder="Address Line 1" />
      </div>
      </td>

      <td></td>

      <td>
      <div class="form-group">
      <label for="County">County</label>
      <input type="text" class="form-control" id="county" name="county" placeholder="County" />
      </div>
      </td>
      </tr>

      <tr>
      <td>
       <div class="form-group">
       <label for="address2">Address Line 2</label>
       <input type="text" class="form-control" id="address2" name="address2" placeholder="Address Line 2" />
       </div>
      </td>

      <td></td>

      <td>
      <div class="form-group">
      <label for="postcode">Postcode</label>
      <input type="text" class="form-control" id="postcode" name="postcode" placeholder="postcode" />
      </div>
      </td>
      </fieldset>
      </tr>
      </table> 

            </div>

        <div class="row">
            <div class="col-sm-4 col-sm-offset-4 text-center">

            <!-- <input type="submit" name="submit" value="Submit" /> -->
                 <button class="btn btn-primary btn-lg" type="submit" name="submit" id="add_customer_submit">Next</button>
            </form>  
            </div>

        </div>

这是我的jQuery：

$(function() {

$("#add_customer_form").submit(function(e){
e.preventDefault();
})

.validate({
    rules:{
        customername: "required",
        address1: "required",
        address2: "required",
        town: "required",
        county: "required",
        postcode: "required"
        },
        messages: {
        customername: "You must enter a customer name. ",
        address1: "You must enter the first line of the address.",
        address2: "You must enter the second line of the address.",
        town: "You must enter a postal town or city. ",
        county: "You must enter the postal county.",
        postcode: "You must enter the postcode. "

    },

    submitHandler: function(form){

        var form_data = {
            customername: $("#customername").val(),
            address1: $("#address1").val(),
            address2: $("#address2").val(),
            town: $("#town").val(),
            postcode: $("#postcode").val(),
            city: $("#city").val(),
        };


        $.ajax({

            url: "<?php echo site_url('customers/add_customer');?>",
            data: form_data,
            type: "post",
            success: function(div){
                $("#add_customer").html(div);

                return false;   
            }

            });
    return false;


    }

});

})