jQuery验证在Ajax提交后不检查电子邮件格式/不工作

Question

我在实现jQuery验证库时遇到两个独立的问题：

1. 当我尝试使用无效的电子邮件地址提交表单时，我没有收到有关格式的警告消息。表单根本就没有提交。如果表单填写正确，则提交工作正常。如果我只缺少必填字段，则验证工作正常。我的电子邮件格式检查出了什么问题？
2. 如果客户想要编辑任何详细信息，则可以使用Ajax在页面上重新显示该表单。发生这种情况时，验证器根本不工作。我该如何解决这个问题？

这是我原来的Javascript（一切正常）：

var detailsform = ('form[id$="register"]');

$('body').on('submit', detailsform, {}, function(event) {

    // Serialize the form data and store the ID of the submitted form
    var formData = $(detailsform).serialize();

    // Stop the browser from submitting the form.
    event.preventDefault();

    $.ajax({
        type: "POST",
        url: $(detailsform).attr('action'),
        data: formData
    }).done(function(data) {

        $('html,body').scrollTop(0);

        var details = $(data).find("#details");
        $("#details").html(details.html());

        var delivery = $(data).find("#delivery");
        $("#delivery").html(delivery.html());
        $('#delivery').removeClass('inactive');

        var carttotals = $(data).find("#carttotals");
        $("#carttotals").html(carttotals.html());

        var payment = $(data).find("#payment");
        $("#payment").html(payment.html());
    });
});

这是我更新的Javascript（添加了验证）：

var detailsform = ('body form[id$="register"]');
$(detailsform).validate({
    rules: {
        name: {
            required: true
        },
        email: {
            required: true,
            email: true
        }
    },
    highlight: function(element, errorClass) {
        $(element).each(function() {
            $(this).closest('div').addClass('error');
        });
    },
    unhighlight: function(element, errorClass) {
        $(element).each(function() {
            $(this).closest('div').removeClass('error');
        });
    },
    messages: {
        name: "Please enter your name",
        email: {
            required: "We require your email address to contact you",
            email: "Your email address must be in the format of name@domain.com"
        },
    },
    submitHandler: function(form) {
        event.preventDefault();
        var formData = $(detailsform).serialize();
        $.ajax({
            type: "POST",
            url: $(detailsform).attr('action'),
            data: formData
        }).done(function(data) {
            $('html,body').scrollTop(0);

            var details = $(data).find("#details");
            $("#details").html(details.html());

            var delivery = $(data).find("#delivery");
            $("#delivery").html(delivery.html());
            $('#delivery').removeClass('inactive');

            var carttotals = $(data).find("#carttotals");
            $("#carttotals").html(carttotals.html());

            var payment = $(data).find("#payment");
            $("#payment").html(payment.html());
        });
    }
});

<div class="checkout-section" id="details">
    <form id="form3_register" action="/shop/checkout" method="post">
        <h2>1. Your Details</h2>
        <div class="infieldlabel">
            <input id="form3_email" name="email" class="checkout-input" type="email" required="required" />
            <label class="infield required" for="form3_email">Your Email for Order Confirmation</label>
            <input id="form3_password" name="password" value="__auto__" type="hidden" />
        </div>
        <div class="row">
            <div class="infieldlabel half">
                <input id="form3_first_name" name="first_name" class="checkout-input" type="text" required="required" />
                <label class="infield required" for="form3_first_name">First name</label>
            </div>
            <div class="infieldlabel half">
                <input id="form3_last_name" name="last_name" class="checkout-input" type="text" required="required" />
                <label class="infield required" for="form3_last_name">Last name</label>
            </div>
        </div>
        <div class="infieldlabel">
            <input id="form3_phone" name="phone" class="hascontent" type="text" />
            <label class="infield" for="form3_phone">Phone Number</label>
        </div>
        <div class="checkboxwrapper">
            <input id="form3_mailinglist_checkbox" name="mailinglist_checkbox" value="1" type="checkbox" />
            <label for="form3_mailinglist_checkbox">Add me to the Newgate Watches mailing list</label>
        </div>

        <h3>Billing address</h3>
        <div class="infieldlabel">
            <input id="form3_address_1" name="address_1" class="checkout-input" type="text" required="required" />
            <label class="infield required" for="form3_address_1">Address 1</label>
        </div>
        <div class="infieldlabel">
            <input id="form3_address_2" name="address_2" class="checkout-input" type="text" />
            <label class="infield" for="form3_address_2">Address 2</label>
        </div>
        <div class="row">
            <div class="infieldlabel third">
                <input id="form3_city" name="city" class="checkout-input" type="text" required="required" />
                <label class="infield required" for="form3_city">Town / City</label>
            </div>
            <div class="infieldlabel third">
                <input id="form3_county" name="county" class="checkout-input" type="text" />
                <label class="infield" for="form3_county">County / State</label>
            </div>
            <div class="infieldlabel third">
                <input id="form3_postcode" name="postcode" class="checkout-input" type="text" required="required" />
                <label class="infield required" for="form3_postcode">Postcode / Zip</label>
            </div>
        </div>
        <div class="row">
            <h3 class="half">Shipping address</h3>
            <div class="checkboxwrapper half">
                <input type="checkbox" name="checkbox" id="toshipping_checkbox" />
                <label for="toshipping_checkbox">Same as Billing Address</label>
            </div>
        </div>
        <div class="row">
            <div class="infieldlabel half">
                <input id="form3_shipping_first_name" name="shipping_first_name" class="checkout-input" type="text" required="required" />
                <label class="infield required" for="form3_shipping_first_name">First name</label>
            </div>
            <div class="infieldlabel half">
                <input id="form3_shipping_last_name" name="shipping_last_name" class="checkout-input" type="text" required="required" />
                <label class="infield required" for="form3_shipping_last_name">Last name</label>
            </div>
        </div>
        <div class="infieldlabel">
            <input id="form3_shipping_address_1" name="shipping_address_1" class="checkout-input" type="text" required="required" />
            <label class="infield required" for="form3_shipping_address_1">Address 1</label>
        </div>
        <div class="infieldlabel">
            <input id="form3_shipping_address_2" name="shipping_address_2" class="checkout-input" type="text" />
            <label class="infield" for="form3_shipping_address_2">Address 2</label>
        </div>
        <div class="row">
            <div class="infieldlabel third">
                <input id="form3_shipping_city" name="shipping_city" class="checkout-input" type="text" required="required" />
                <label class="infield required" for="form3_shipping_city">Town / City</label>
            </div>
            <div class="infieldlabel third">
                <input id="form3_shipping_county" name="shipping_county" class="checkout-input" type="text" />
                <label class="infield" for="form3_shipping_county">County / State</label>
            </div>
            <div class="infieldlabel third">
                <input id="form3_shipping_postcode" name="shipping_postcode" class="checkout-input" type="text" required="required" />
                <label class="infield required" for="form3_shipping_postcode">Postcode / Zip</label>
            </div>
        </div>
        <div>
            <input value="Continue to Delivery Options" type="submit" />
            <input type="hidden" name="cms-form" value="cmVnaXN0ZXI6cGVyY2hfbWFpbGNoaW1wIHBlcmNoX3Nob3A6L3RlbXBsYXRlcy9zaG9wL2NoZWNrb3V0L2N1c3RvbWVyX2NyZWF0ZV9wYXNzd29yZGxlc3MuaHRtbDoxNDc2ODc0MzY1" />
        </div>
    </form>
</div>

一如既往地非常感谢！