<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" id="name" required>
  <input type="submit">
</form>

.error {
  position: relative;
  animation: shake .1s linear;
  animation-iteration-count: 3;
  border: 2px solid red;
  outline: none;
}

@keyframes shake {
  0% {
    left: -4px;
  }
  100% {
    right: -4px;
  }
}

$("form").submit(function(e) {
  e.preventDefault();
});

$("form input").on("invalid", function(event) {
  $('#name').addClass('error');
  setTimeout(function() {
    $('#name').removeClass('error');
  }, 500);
});