Question

我正在尝试使用jquery来验证我的表单，如果用户将任一输入框留空，它将显示一个红色边框。现在我正在尝试向外部div'home_column'添加水平摇动效果。

然而，这不起作用，输入框周围的红色边框仍然显示，但没有震动效果。请有人告诉我我哪里出错了，提前谢谢

HTML

<div class="home_column">
<div class="login_form">
<form name="login" id="login" action="include/validate_login.php" method="post" onsubmit="return validateForm()"> 
<h21>Username</h21><br/>
<input type="text" class="login_form_front" id="myusername" name="myusername"><br/>
<h21>Password</h21><br/>
<input type="password" class="login_form_front" autocomplete="off"  id="mypassword" name="mypassword">
<br/>
<input type="submit" class="buttons_login" value="Login" id="login" name="login">
</form> 
</div>
</div>

jquery的

<script>
    function validateForm() {
     var a = document.forms["login"]["myusername"].value;
     var b = document.forms["login"]["mypassword"].value;
     if (a == null || a == "" || b == null || b == "") {
     if (a == null || a == "") { document.forms["login"]["myusername"].style.border = "2px solid #963634";}
     if (b == null || b == "") { document.forms["login"]["mypassword"].style.border = "2px solid #963634";}

     $( ".home_column" ).effect( "shake" );

    return false;   

     }
 }

 </script>

Answer 1

当字段为空时，在提交事件时，您可以为运行简单CSS3动画的shake分配一个input类 - 无需加载整个fx库并增加页面大小仅用于单一效果

e.g。 http://codepen.io/anon/pen/ZYRyBP

input.shake {
   -webkit-animation: shake .2s linear 0s 4;
   animation: shake .2s linear 0s 4;
}


@-webkit-keyframes shake {
   0% { transform: translateX(-5px); }
   50% { transform: translateX(5px); }
}
@keyframes shake {
   0% { transform: translateX(-5px); }
   50% { transform: translateX(5px); }
}

Answer 2

如果还没有导入，请在jquery核心脚本src之后将其放在下面的html头中。希望这有帮助。

<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>

jquery：如果在提交时输入为空，则水平抖动div？

2 个答案: