No válida de Correo electrónico y Número de Teléfono no Válido Alerta de que No Aparecen

He hecho un programa que se supone que es para notificar al usuario si se han introducido no es válido dirección de correo electrónico y/o número de teléfono no válido, pero cuando el usuario hace entrar en un inválido dirección de correo electrónico y/o número de teléfono no válido, no pasa nada, es decir, no no válida de correo electrónico, número de teléfono, aparecerá el mensaje. Por favor, ¿podría alguien decirme qué está mal, o dar un enlace para el código correcto.

$("#validationForm").submit(function(event) {

  var errorMessage = "";

  event.preventDefault();

  function isValidEmailAddress(emailAddress) {
    var pattern = /^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i;
    return pattern.test(emailAddress);
  };

  if (!isValidEmailAddress($("#email").val())) {

    errorMessage = "Please enter a valid email address";

  }

  if (!$.isNumerics($("#phone").val())) {

    errorMessage = "Please eneter a valid phone number";

  }

  $("#error").html(errorMessage);

});

#wrapper {
  width: 600px;
  margin: 0 auto;
  font-family: helvetica;
  font-size: 1.2em;
}

input {
  width: 300px;
  height: 30px;
  padding: 5px;
  border-radius: 5px;
  font-size: 1.2em;
  border: 1px solid grey;
  margin-bottom: 10px;
}

label {
  width: 200px;
  float: left;
  padding-top: 7px;
}

#submitButton {
  height: 50px;
  margin-left: 200px;
  width: 100px;
}

#error {
  color: red;
  margin: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">

  <div id="error"></div>

  <form id="validationForm">

    <label for="email">Email</label>
    <input name="email" id="email" />

    <label for="phone">Telephone</label>
    <input name="phone" id="phone" />

    <label for="pass">Password</label>
    <input name="pass" type="password" />

    <label for="pass">Confirm Password</label>
    <input name="pass" type="password" />

    <input id="submitButton" type="submit" value="Submit" />

  </form>

</div>