使用jQuery未显示错误消息

我正试图使用jQuery在span标记中显示一条错误消息。如果输入正确，我可以在红框和绿框中突出显示表单字段，但文本不会显示。我是编码新手，一直在网上寻找想法和解决方案，我知道我错过了一些东西，也许很简单，但我正在为此绞尽脑汁。

$(document).ready(function() {
  // Name can't be blank
  $('#name').on('input', function() {
    var input = $(this);
    var is_name = input.val();
    if (is_name) {
      input.removeClass("invalid").addClass("valid");
    }
    else {
      input.removeClass("valid").addClass("invalid");
    }
  });
  // Email must be an email
  $('#email').on('input', function() {
    var input = $(this);
    var re = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:'.[a-zA-Z0-9-]+)*$/;
    var is_email = re.test(input.val());
    if (is_email) {
      input.removeClass("invalid").addClass("valid");
    }
    else {
      input.removeClass("valid").addClass("invalid");
    }
  });
  // Message can't be blank
  $('#message').keyup(function(event) {
    var input = $(this);
    var message = $(this).val();
    console.log(message);
    if (message) {
      input.removeClass("invalid").addClass("valid");
    }
    else {
      input.removeClass("valid").addClass("invalid");
    }
  });
  // After Form Submitted Validation
  $("#contact_submit button").click(function(event) {
    var form_data = $("#contact").serializeArray();
    var error_free = true;
    for (var input in form_data) {
      var element = $("#contact_submit" + form_data[input]['name'], ['email'], ['message']);
      var valid = element.hasClass("valid");
      var error_element = $("span", element.parent());
      if (!valid) {
        error_element.removeClass("error").addClass("error_show");
        error_free = false;
      }
      else {
        error_element.removeClass("error_show").addClass("error");
      }
    }
    if (!error_free) {
      event.preventDefault();
    }
    else {
      alert('No errors: Form will be submitted');
    }
  });
});

.error {
  display: none;
  margin-left: 10px;
}
.error_show {
  color: red;
  margin-left: 10px;
}
input.invalid,
textarea.invalid {
  border: 2px solid red;
}
input.valid,
textarea.valid {
  border: 2px solid green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="body">
  <form id="contact" method="post" enctype="multipart/form-data" action="">
    <h1 class="title">Contact</h1>
    <div>
      <label for="name">Your Fullname</label>
      <input type="text" id="name" name="name" required placeholder="Your Name">
      <span class="error error_show">This field is required</span>
    </div>
    <div>
      <label for="email">Your Full Email</label>
      <input name="email" type="email" id="email" required placeholder="Your Email">
      <span class="error error_show">This field is required</span>
    </div>
    <div>
      <label for="message">Message</label>
      <textarea id="message" name="message" cols="20" rows="5" required placeholder="Message"></textarea>
      <span class="error error_show">This field is required</span>
    </div>
    <div id="contact_submit">
      <button type="submit"></button>
    </div>
  </form>
</section>