How to shake login form on error

Question

I have a login page with HTML and CSS. It's fully functional and all that stuff. However, when login fails I want the login form to shake. How do I make it shake. Right now, it does nothing.

Here is my HTML/CSS/JavaScript. If more code is needed, please tell me.

HTML

<div class="input">
    <c:if test="${not empty error}">
        <div class="error">${error}</div>
    </c:if>
    <c:if test="${not empty msg}">
        <div class="msg">${msg}</div>
    </c:if>
    <div class="email">
        <input type="text" name="username"
            placeholder="[email protected]"></input>
    </div>
    <div class="password">
        <input type="password" name="password" placeholder="*********"></input>
    </div>
</div>

<input class="login_btn" type="submit" name="submit" value="">

CSS

.container .login_component .login_wrap .login_wp .input input {
    width: 290px;
    height: 50px;
    padding-left: 20px;
    font-size: 15px;
    border: none;
    background: transparent;
}

.container .login_component .login_wrap .login_wp .input .email {
    height: 53px;
    margin-top: 20px;
    background:
        url("http://xiilab.mynetgear.com:81/c.hwang/rems/images/login/input.png");
    background-repeat: no-repeat;
    background-position: center center;
}

.container .login_component .login_wrap .login_wp .input .password {
    height: 53px;
    margin-top: 20px;
    background:
        url("http://xiilab.mynetgear.com:81/c.hwang/rems/images/login/input.png");
    background-repeat: no-repeat;
    background-position: center center;
}

.container .login_component .login_wrap .login_wp .login_btn {
    height: 55px;
    margin-top: 30px;
    background:
        url("http://xiilab.mynetgear.com:81/c.hwang/rems/images/login/login_btn.png");
    background-repeat: no-repeat;
    background-position: center center;
    border: none;
    width: 310px;
}

JavaScript

$('input[type=submit]').on('click', function(e){
      e.preventDefault();
      $('.input').addClass('ahashakeheartache');
});

$('.input').on('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e){
      $('.input').delay(200).removeClass('ahashakeheartache');
});

Answer 1

If you use animate.css you can create that effect. Here is the github project where you can download the source code. There are other effects you can check out too.

Code for shaking from animate.css:

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.bounceIn,
.animated.bounceOut {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}

.animated.flipOutX,
.animated.flipOutY {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}

@-webkit-keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

@keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

JS

$(document).ready(function(){
     $('.submit').click(function(e){
       // Code to check login
       // If fail
        $('.input').addClass('animated shake');
     });
})

Answer 2

Use simple animation in Jquery include the jquery UI

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

    $(document).on('click', '#yoursubmitdiv', function(){

    //code if login fails

      $( "#yourloginfield" ).effect( "shake" ); // this will shake your div



    });