jquery: shake div горизонтально, если вход пустой на submit?

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

Если еще не импортировать, поместить это в HTML голову ниже после того, как основной JQuery сценария СРК. Надеюсь, эта помощь.

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

Answer 2

На представить событие, когда поле пусто вы можете назначить shake класс к input, который управляет простой анимацией CSS3 — не нужно загружать всю библиотеку fx и увеличивать размер страницы только для одного эффекта

, например. 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); } 
}