Question

我正在使用jquery表单验证插件来验证我的表单。我已经设置了所有的规则，消息等。所以在我的html中我创建了一个css样式的对话框，它只是作为确认消息显示给用户。当用户注册这个div confirmation时，只需淡入整个调用表单的操作文件之前的页面。我的问题是如何延迟表单提交操作的触发时间足以让我的确认淡入淡出。当我尝试它时，要么立即触发提交，要么根本不做任何事情。

//validation plugin
$("#register_form").validate({
    errorClass: "invalid",
    invalidHandler: function (event, validator) {
        $('html, body').animate({
            scrollTop: '0px'
        }, 300);
    },
    onfocusout: false,
    onkeyup: false,
    onclick: false,
    rules: {
        firstname: {
            required: true
        },
        lastname: {
            required: true
        },
        email: {
            required: true,
            email: true
        }
    },

    messages: {
        firstname: {
            required: "Enter your first name"
        },
        lastname: {
            required: "Enter your last name"
        },
        email: {
            required: "Enter your email",
            email: "Enter a valid email"
        }

    },

    errorContainer: $(".errorCont"),
    errorLabelContainer: $('.errorCont ul'),
    wrapper: 'li',

}); //Etc above all working its the code below

$("#register_form").submit(function (e) {
    e.preventDefault();
    if ($("#register_form").valid()) {
        showpopup();
        // Show popup and then proceed with submission action ??
        // calling submit here just submits straight away without waiting for pop to hide 
    }

});

function showpopup() {
    $('#dialog').fadeIn("slow");
    $("#bodywrap").css({
        "opacity": "0.3"
    });
    setTimeout(hidepopup, 3000);
}

function hidepopup() {
    $('#dialog').hide();
    $("#bodywrap").css({
        "opacity": "1");

    }
}

Answer 1

不使用 setTimeout ，而是使用.fadeOut()函数的完整处理程序。

$('#dialog').fadeOut("slow", function() {
    // This function will fire after the animation's ending
    // Submit the form from here.
});

Answer 2

为了在验证通过时提交表单，您可以使用submitHandler对象的validate方法，jQuery的动画方法也接受动画完成时执行的回调函数。

请注意，默认情况下，jQuery会在400毫秒内为元素设置动画，我使用了setTimeout方法，以防不良用户需要等待3000毫秒。

$("#register_form").validate({
    // ...
    // this function is executed when validation passes   
    submitHandler: function() {
       var that = this,
           $body = $("#bodywrap").css({ 
             "opacity": "0.3" 
           }),
           $dialog = $('#dialog');
       $dialog.fadeIn("slow", function(){
          setTimeout(function() {
             $body.css({"opacity": "1"});
             $dialog.fadeOut("slow", function(){
               that.submit();
             });
          }, 2600);
       });

    }
 });

延迟html表单提交，直到div动画完成

2 个答案: