jQuery表單未提交或驗證

Question

我在jquery中具有以下表單驗證和提交腳本，但由於某種原因其無法正常工作。 它看起來像它的提交，但是當我單擊提交時，它只是重置了表單，並且沒有生效或執行ajax發布。 有人知道我在這里做錯了嗎？

修改后的代碼

    <script type="text/javascript">
    $(function(){
    $('#form').submit(function(e){
              e.preventDefault();
        $("#form").validate({debug: false,
                             rules: {
                               name: "required",
                               email: {
                                 required: true,
                                 email: true
                               },
                               phone: {
                                 required: true,
                                 phone: true
                               }
                             },
                             messages: {
                               name: "Please let us know who you are.",
                               email: "A valid email will help us get in touch with you.",
                               phone: "Please provide a valid phone number.",
                             },
                             submitHandler: function() {  

                             // Send the request
                             $.post('/submit.php', {
                               name: $('#name').val(),
                               email: $('#email').val(),
                               phone: $('#phone').val(),
                               message: $('#message').val()
                             }, function(d){
                               alert("Thank you for submitting your request someone will contact your shortly.");
                             }); 
                           }

        });
});
});

</script>

Answer 1

您只需要添加

$('#form').submit(function(e) {
   ....
   return false; 
});

到提交末尾，這將避免執行表單的實際提交。

更新：正如Dustin指出的那樣，如果您不想阻止事件冒泡，則preventDefault可能會更好。

$('#form').submit(function(e) {
   ....
   e.preventDefault();
});

Answer 2

我對您的代碼進行了一點切換，似乎您在使用jquery validate ?，他們的文檔具有提交表單的正確方法。 http://jqueryvalidation.org/documentation/#too-much-recursion

<script type="text/javascript">
$("#form").validate({
        debug: false,
        rules: {
            name: "required",
            email: {
                required: true,
                email: true
                    },
            phone: {
                required: true,
                phone: true
                    }
                },
        messages: {
            name: "Please let us know who you are.",
            email: "A valid email will help us get in touch with you.",
            phone: "Please provide a valid phone number.",
        },
        submitHandler: function(form) {  
                  // Stop the form actually posting
                   e.preventDefault();

                 // Send the request
               $.post('/submit.php', {
               name: $('#name').val(),
               email: $('#email').val(),
               phone: $('#phone').val(),
               message: $('#message').val()
               }, function(d){
                    alert("Thank you for submitting your request someone will contact your shortly.");
               }); 
        }

});