Question

我遇到了使用jQuery Validation Plugin 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。第一次点击submit时，验证尚未应用于表单。第二次。

您应该将调用移至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/

为什么在jQuery Validate submitHandler被触发之前你必须提交两次？

1 个答案: