Form shake valid

by Bruno Gibellino

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<div class="row mt-3">
  <div class="col-3 col-sm-3 col-lg-3"></div>
  <div class="col-6 col-sm-6 col-lg-6">
    <form method="post">
      <input type="text" class="form-control mt-1" id="name" placeholder="Name">
      <input type="email" class="form-control mt-1" id="mail" placeholder="E-mail">
      <input type="password" class="form-control mt-1" id="pass" placeholder="Password">
      <input type="password" class="form-control mt-1" id="repass" placeholder="Repeat Password">
      <button onclick="return false;" id="btnSubmit" class="btn btn-primary mt-2">Submit</button>
      <input type="submit" id="submit">
    </form>
  </div>
</div>
<div class="row ml-5 mt-3">
  <p></p>
</div>

CSS

body {
  overflow-x: hidden;
}

input[type="submit"] {
  display: none;
}

.border {
  border: 1px solid #f93939 !important;
}

.shake {
  animation: shake 1s;
}

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}

JavaScript

$(document).ready(function() {

  $('form input:not([type="submit"])').focus(function() {
    $(this).removeClass("border");
  });

  $("#btnSubmit").click(function() {
    $('form input:not([type="submit"])').each(function() {
      if ($(this).val() == "") {
        $(this).addClass("border shake").delay(1000).queue(function() {
          $(this).removeClass("shake").dequeue();
        });
      }
    });

    if (!isEmail($("#mail").val())) {
      $("#mail").addClass("border shake").delay(1000).queue(function() {
        $("#mail").removeClass("shake").dequeue();
      });
    }

    if ($("#pass").val() != $("#repass").val()) {
      $("#pass, #repass").addClass("border shake").delay(1000).queue(function() {
        $(this).removeClass("shake").dequeue();
      });
    } else if ($("#pass").val() != "" && $("#repass").val() != "" && $("#pass").val() == $("#repass").val()) {
      $("#pass, #repass").removeClass("border");
    }
  });

});

function isEmail(email) {
  var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  return regex.test(email);
}