为什么在触发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屋！