为什么在触发 jQuery Validate submitHandler 之前必须提交两次? [英] Why do you have to submit twice before jQuery Validate submitHandler is triggered?

问题描述

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

I have a situation where validating a HTML form with jQuery Validation Plugin 1.9.0. (I'm using jQuery 1.6.4). If the form is filled out correctly after the page is loaded the validation takes place on submit. The validation gives a success message, but it doesn't trigger the submitHandler. It only triggers the submitHandler if you press the submit button again.

我在 http://jsfiddle.net/peterph/Hv3xz/1/上创建了一个模拟

I created a simulation on http://jsfiddle.net/peterph/Hv3xz/1/ to illustrate the problem. Can anyone tell me how I can fix this problem?

<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>

推荐答案

validate 在您提交表单之前不会被调用.第一次点击 submit 时，验证尚未应用于表单.第二次了.

validate is not called until you submit the form. The first time you hit submit, validate has not been applied to the form. The second time it has.

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

You should move the call to validate outside of the submit handler:

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 之前必须提交两次?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！