0

我正在使用 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");

    }
}
4

2 回答 2

0

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

$('#dialog').fadeOut("slow", function() {
    // This function will fire after the animation's ending
    // Submit the form from here.
});
于 2013-08-20T04:29:44.757 回答
0

要在验证通过时提交表单，您可以使用对象的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);
       });

    }
 });
于 2013-08-20T04:30:16.240 回答