jquery - 为什么在触发 jQuery Validate SubmitHandler 之前必须提交两次？

Question

我遇到了使用 jQuery 验证插件 1.9.0 验证 HTML 表单的情况。 (我使用的是 jQuery 1.6.4)。 如果页面加载后表单填写正确，则提交时会进行验证。验证会给出成功消息，但不会触发submitHandler。 仅当您再次按下提交按钮时，它才会触发submitHandler。

我在 http://jsfiddle.net/peterph/Hv3xz/1/ 上创建了一个模拟来说明问题。 谁能告诉我如何解决这个问题？

<form method="post" id="form">
    <input id="E_Mail" name="E_mail" title="E_mail" required="required" /><br />
    <input class="submit" type="submit" value="Send"/>
</form>

<script>
    jQuery(function($) {
        $("#form").submit(function(e) {
            var $form = $(this);
            alert('Start Validation');
            $form.validate({
                debug: false,
                focusInvalid: false,
                onfocusout: false,
                onkeyup: false,
                onclick: false,
                rules:
                {
                    E_mail: {required:true, email:true },
                },
                success: function(label) {
                    alert('succes:' + label);
                },
                submitHandler: function(form){
                    alert('start submitHandler');
                    postContent('test');
                    alert('end submitHandler');
                },
                invalidHandler: function(form, validator) {
                    alert('invalidHandler');
                },
            }).form();
            alert('end Validation');
            e.preventDefault();
        });
    });

    function postContent(postData){
        alert('postcontent: ' + postData);
    }
</script>

Answer 1

在您提交表单之前，不会调用

validate。第一次点击提交时，验证尚未应用于表单。第二次了。

您应该将对 validate 的调用移至 submit 处理程序之外:

jQuery(function ($) {
    $("#form").validate({
        debug: false,
        focusInvalid: false,
        onfocusout: false,
        onkeyup: false,
        onclick: false,
        rules:
        {
            E_mail: {required:true, email:true },
        },
        success: function(label) {
            alert('succes:' + label);
        },
        submitHandler: function(form){
            alert('start submitHandler');
            postContent('test');
            alert('end submitHandler');
        },
        invalidHandler: function(form, validator) {
            alert('invalidHandler');
        },
    });
});

一切都应该正常工作。

更新示例: http://jsfiddle.net/8r47E/