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

我正在使用jquery表单验证插件来验证我的表单。我已经设置了所有的规则，消息等。所以在我的html中，我做了一个css样式的对话框，它仅仅作为确认消息显示给用户。当用户注册这个div confirmation时，只需在表单的动作文件被调用。我的问题是，我如何延迟表单提交操作的触发时间足以让我的确认淡入淡出。当我尝试立即开始提交或完全没有做任何事情。直到div动画完成后延迟html表单提交

//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"); 

    } 
}

来源

2013-08-20 user1927602

我搞糊涂了。如果表单验证成功，您是否希望等待动画？ – Itay

是的，在这一点上，我只是想...首先验证表单。然后显示确认3秒。然后执行由表单（php文件）指定的操作。之后，我会检索表单值等等 – user1927602

我已经使用submitHandler，但是当我在寻找解决方案时，我注意到人们提到使用'.submit'。 – user1927602

而不是使用的setTimeout的使用.fadeOut()功能的完整的处理程序。

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

来源

2013-08-20 04:29:44 Itay

因为当验证通过就可以使用validate对象的submitHandler方法提交表单，也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-20 04:30:16 undefined

你需要什么时间超时？ – Itay

@Itay我使用超时，因为OP使用'setTimeout（hidepopup，3000） ;'。其实我不需要它:)。 – undefined

我认为他使用它，因为他想等到动画结束:)） – Itay

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

回答

相关问题