<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.0/animate.min.css" rel="stylesheet" />
<div class="container">
<h2>Demo</h2>
<div class="row">
<div class="col-md-6">
<form action="http://google.com/" method="post" id="sign-up-form" class="form-wrapper cf">
<input type="email" placeholder="Email address" name="emailaddress" id="form-email" required>
<button type="submit" id="form-submit">Submit</button>
</form>
</div>
</div>
</div>
#form-email {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes shake {
0%, 100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
-webkit-transform: translateX(-10px);
transform: translateX(-10px);
}
20%, 40%, 60%, 80% {
-webkit-transform: translateX(10px);
transform: translateX(10px);
}
}
@keyframes shake {
0%, 100% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
-webkit-transform: translateX(-10px);
-ms-transform: translateX(-10px);
transform: translateX(-10px);
}
20%, 40%, 60%, 80% {
-webkit-transform: translateX(10px);
-ms-transform: translateX(10px);
transform: translateX(10px);
}
}
.shake {
-webkit-animation-name: shake;
animation-name: shake;
}
var emailField = $('#form-email');
function validateEmail(email) {
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,6})?$/;
return emailReg.test(email);
}
$('#form-submit').click(function(event) {
event.preventDefault();
var email = emailField.val();
if (!validateEmail(email) || $.trim(email) === '') {
emailField.addClass('shake');
return;
}
$('#sign-up-form').submit();
});
$("#form-email").on('animationend webkitAnimationEnd oAnimationEnd', function(){$('#form-email').removeClass("shake");});
