Javascript jQuery单击事件的Animate.css问题

我正在尝试对使用jQuery构建的表单应用字段验证。我还使用

animate.css

应用不同的动画类

假设我有一个电子邮件字段，用户单击submit并检查他们输入的电子邮件是否有效。如果不是，则将

抖动

动画应用于输入字段

到目前为止，我掌握的代码是：

$submit.click(function(event) {
  event.preventDefault();
  var email = $input.val();

  // This does not seem to ever fire.
  $input.removeClass('shake');

  if (!method.validateEmail(email) || $.trim(email) == '') {
    $input.addClass('shake');
    return;
  }

  $form.submit();
});

这在用户首次提交表单时起作用。但是，任何后续单击都不会再现抖动动画。在检查电子邮件是否有效之前，我尝试应用removeClass（“shake”），但它似乎从未启动过

我想出的另一种方法是设置2000ms的间隔，以检查输入字段是否有一类抖动，如果有，则将其删除，但这是错误的，因为用户可以在间隔结束前300ms提交表单，导致动画只持续剩余的时间。间隔的代码为：

setInterval(function() {
  if ($input.hasClass('shake')) {
    $input.removeClass('shake');
  }
}, 2000);

小提琴可以在

你知道如何让表单在每次提交时都使用无效的输入吗？谢谢。

您的代码

$submit.click(function(event) { //...

向$submit选择发送单击事件。大概，您要做的是在用户单击时执行函数

$submit.on("click", function(event) { //...

---

在动画结束时触发事件以移除类，而不是在单击事件中

$input.one('webkitAnimationEnd mozAnimationEnd 
    MSAnimationEnd oanimationend animationend', $(this).removeclass('shake'));

我还没有测试，但我认为它会起作用

---

编辑

好了，我想已经修好了

---

“一”只能发射一次，因此我将其更改为“开”。

您能制作一个JSFIDLE吗？我忘记了

抖动

动画。。。贴在这里：很确定点击和点击是一样的，不是吗

on（'click'）

是click函数调用的内容。我试过了，但没有解决我的问题。不幸的是，它没有：（而且您有一个轻微的语法错误…应该是

removeClass

）。

$("#form-email").on('animationend webkitAnimationEnd oAnimationEnd',
   function(){$('#form-email').removeClass("shake");});