jQuery - 如何延迟表单提交，直到动画完成？

我有这个页面动画，当用户离开页面时，文档向左滑动。然而，我也有这种形式，用户填写然后点击“下一步”按钮，我希望提交表单以等待动画完成（动画e3ms？）jQuery - 如何延迟表单提交，直到动画完成？

凭借我平庸的JavaScript知识（特别是表格和解析）我写了一个脚本，据我所知应该工作，但事实并非如此。有任何想法吗？任何帮助将非常感激。

的JavaScript：

function ValidateForm() { 
    var x = document.forms["myForm"]["myInput"].value; 

    if(x == null || x == "") { 
     $(".error-msg").animate({ 
      opacity: "1" 
     }); 

     return false; 
    } else { 
     $("body").animate({ 
      "margin-left": "-200px", 
      opacity: "0" 
     }); 
    } 
}

HTML：

<form name="myForm" action="next.html" onsubmit="return ValidateForm();"> 
    <input type="text" name="myInput" placeholder="Example: [email protected]"> 
    <span class="error-msg">You must fill out required elements!</span> 

    <input type="submit" value="Next"> 
</form>

CSS代码只是风格形成，并设置.error-MSG与 “0” 的不透明度。

P.S .:我知道JavaScript表单验证是危险的，但是一旦我发布我的网站，我会在我的服务器上使用PHP或ASP验证以及JavaScript验证进行备份。

来源

2012-11-26 ModernDesigner

你尝试动画完成回调函数？ – Tariqulazam

我可能会将您的ValidateForm回调移动到提交按钮的onclick上。然后在你的回调中调用e.preventDefault（）来停止从点击冒泡提交的表单。在此之后，手动提交表单动画（）

HTML的回调

<form name="myForm" action="next.html"> 
    <input type="text" name="myInput" placeholder="Example: [email protected]"> 
    <span class="error-msg">You must fill out required elements!</span> 

    <input type="submit" value="Next" onclick="ValidateForm();"> 
</form>

的Javascript

function ValidateForm() { 
    // stop the form auto submitting 
    e.preventDefault(); 
    var x = document.forms["myForm"]["myInput"].value; 

    if(x == null || x == "") { 
     $(".error-msg").animate({ 
      opacity: "1" 
     }); 

     return false; 
    } else { 
     $("body").animate({ 
      "margin-left": "-200px", 
      opacity: "0" 
     }, 
     { 
      complete: function() { $("form[name='myForm']").submit(); } 
     }); 
    } 
}

来源

2012-11-26 23:47:44 Owen

您需要在动画结尾处使用回调函数来提交表单。尝试以下操作。

function ValidateForm() { 
    var x = document.forms["myForm"]["myInput"].value; 

    if(x == null || x == "") { 
     $(".error-msg").animate({ 
      opacity: "1" 
     }); 
    } else { 
     if ($('form').css('opacity') == 0) { 
      return true; 
     } 

     $("body").animate(
      {margin-left: "-200px",opacity: "0"}, 
      function() { 
       $('form').submit(); 
      } 
     ); 
    } 

    return false; 
}

来源

2012-11-26 23:41:30

+1 [animate]（http://api.jquery.com/animate/）函数的回调。 – Nope

嗯，这似乎只是调用动画，但不能发布表单。 :( – ModernDesigner

这必须是因为'onsubmit =“返回ValidateForm（）;' 您需要将表单的状态（已验证或未验证）存入变量以知道您是否需要播放动画，或者检查我应该编辑我的答案因此 –

这是关于JQ动画文件Here

在.animate参数的最后一个参数是当你的动画是在其上执行的回调函数，所以你看起来像：

$("body").animate({ 
      "margin-left": "-200px", 
      opacity: "0" 
     }, 200, function() { 
      $('form').submit(); 
     });

PS 200表示完成动画所需的时间......默认值为400.

来源

2012-11-26 23:43:35

jQuery - 如何延迟表单提交，直到动画完成？

回答

相关问题