Question

我正在尝试在我使用jQuery构建的表单上应用字段验证。我也使用animate.css来应用不同的动画类。

假设我有一个电子邮件字段，用户点击提交并检查他们输入的电子邮件是否有效。如果不是，请将shake动画应用于输入字段。

到目前为止我的代码：

$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'），但它似乎没有触发。

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

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

小提琴可以在http://jsfiddle.net/9Zs9T/1/

找到

任何想法如何让表单动摇每一次提交无效输入？感谢。

Answer 1

您的代码

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

向$ submit选项发送click事件。据推测，您想要做的是在用户点击

时执行该功能

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

Answer 2

在动画结束时触发一个事件，以删除该类，而不是在click事件中。

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

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

修改

好的，我认为现在已经修好了。 Try this.

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

'one'只会触发一次所以我将其更改为'on'。

使用jQuery click事件的Animate.css问题

2 个答案: