Javascript jquery验证和ajax表单提交

我对jquery验证和ajax表单提交有问题

以下是验证代码：

$(function() {
   $("#contact-form").validate({
       rules: {
               name: {
                       required: true,
                       minlength: 2,
                       maxlength: 32
               },
               email: {
                       required: true,
                       email: true
               },
               message: {
                       required: true,
                       minlength: 20
               }

       },           
       messages: {
               name: {
                       required: "Please, enter a name",
                       minlength: $.format("Keep typing, at least {0} characters required"),
                       maxlength: $.format("Whoa! Maximum {0} characters allowed")
               },
               email: {
                       required: "Please, enter an email",
                       email: $.format("Please, enter valid email")
               },
               message: {
                       required: "Please, enter a message",
                       minlength: $.format("Keep typing, at least {0} characters required")
               }               
       },

       submitHandler:function(form) {
               form.submit();                         
        }
   }); 
});

以下是提交表单的ajax代码：

$(document).ready(function(){
$('#contact-form').on('submit',function(e) {

$('#name').val('Your Name');
$('#email').val('Your Email');
$('#message').val('Your Message');

$.ajax({
    url:'',
    data:$(this).serialize(),
    type:'POST',
    success:function(data){
        console.log(data);
        $("#success").show().fadeOut(10000);
        },
    error:function(data){
        $("#error").show().fadeOut(10000);
        }
    });
    e.preventDefault();
});
});

我尝试做的是表单验证，然后提交表单。提交后，表单应再次显示初始值

问题是，当我删除ajax时，验证工作正常，但我需要ajax代码来重新显示表单

---

如何使这两段代码协同工作？

将ajax调用放在submitHandler函数中：

submitHandler:function(form) {
    //form.submit();     


    $.ajax({
        url:'', //you will need a url surely, perhaps $(form).attr('action');
        data:$(form).serialize(),
        type:'POST',
        success:function(data){
            console.log(data);
            $('#name').val('Your Name');
            $('#email').val('Your Email');
            $('#message').val('Your Message');
            $("#success").show().fadeOut(10000);
        },
        error:function(data){
            $("#error").show().fadeOut(10000);
        }
    });                    
}

---

非常感谢。它工作得很好。看起来我试图在submithandler中放置很多内容：）我将与ajaxsubmit相关的全部代码放在了这里。正如您所展示的那样，只在那里放置ajax调用就足够了。再次感谢@用户3696921没问题，很高兴我能帮助你。