Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to shake login form on error

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');
});
like image 405
bmarkham Avatar asked Oct 19 '15 08:10

bmarkham


People also ask

What is the code for login page in HTML?

<input type="text" placeholder="Enter Username" name="username" required> <label>Password : </label> <input type="password" placeholder="Enter Password" name="password" required> <button type="submit">Login</button>


2 Answers

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');
     });
})
like image 167
Victor Luna Avatar answered Oct 17 '22 08:10

Victor Luna


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



    });
like image 23
Wim Pruiksma Avatar answered Oct 17 '22 07:10

Wim Pruiksma