jQuery 验证 : How to post() after form is valid?

Question

这有效:

 $('#contestform').on('submit', function(e) {
     $.post( '/', $(this).serialize(), function(response){
    console.log(response);
},'json' );
    e.preventDefault();
});

这有效

jQuery("#contestform").validate();

但我不知道如何让他们一起工作。我希望只有在单击提交并且表单有效时才会发生顶部代码中的内容。我已经尝试过 http://docs.jquery.com/Plugins/Validation/validate#toptions 中的东西但我想我不明白。我曾经一度让它工作过，但你必须点击提交两次。

有一件事是，如果我可以帮助的话，我想将 post() 内容保留在一个单独的函数中，因为这两部分将来自 php.ini 的不同部分。

编辑 1尝试过这个，不起作用(在表格下)(不工作，我的意思是它正常提交，而不是ajax)

function postForm(e) {
     jQuery.post( '/', $(this).serialize(),   function(response){
    console.log(response);
},'json' );
    e.preventDefault();
}
jQuery("#contestform").validate({submitHandler: postForm});

编辑2好吧，我让它与 jQuery.Form 插件一起工作 http://www.malsup.com/jquery/form/#ajaxSubmit不过，我想知道我在上面的代码中做错了什么。

function  showResponse(responseText, statusText, xhr, $form){
    console.log(responseText);
}
var soptions = { 
        success: showResponse ,
        dataType: 'json'
        };

jQuery("#contestform").validate({
   submitHandler: function(form) {
     jQuery(form).ajaxSubmit(soptions);
        return false; // always return false to prevent standard browser submit and page navigation 
   }
});

Answer 1

submitHandler 函数的参数不是 jQuery 事件，而是表单 DOM 对象。所以

1. 当您调用 e.preventDefault() 时，您的代码将抛出错误；
2. 调用 $(form).serialize()，而不是 $(this).serialize()

要让您的 edit1 正常工作，请执行以下操作

<script>
$(function () {
    $("form").validate({
        submitHandler: function (form) {
            $.post('/your_url/',
            $(form).serialize(), function (response) {
                console.log(response);
            }, 'json');
        } 
    });
});
</script>

或者将 postForm 函数分开

<script>
$(function () {

    function postForm(form) {
        $.post('/your_url/',
            $(form).serialize(),
            function (response) { console.log(response); }, 
            'json');
    }

    jQuery("form").validate({
        submitHandler : postForm
    });
});
</script>