jQuery Validate onkeyup 和突出显示的问题

Question

我在使用 jQuery Validate 时遇到问题。这是我第一次使用 Validate 创建表单，我有点困惑为什么有些东西不起作用。我将它上传到JsFiddle HERE，这样它就不会在这里变得不堪重负，但他们要求我添加一些代码，所以对于第一个问题，我将在下面包含一个我尝试过的示例。

$('.awesome-form').validate({
                    onkeyup:true,
                    errorElement: 'div',
                    errorClass: 'formError',

1. 我正试图让它验证 onkeyup。我试图像上面的文档中所说的那样添加 onkeyup ，但这并没有达到我想要的效果。在我点击回车之前，名称字段和消息字段不会显示错误。有时我可以让它出现，但通常只有在多次点击和提交后才会出现。

2. 我对自定义突出显示有疑问。由于某种原因，它仅适用于消息输入。本质上我希望它在发生错误时立即将边框底部变为红色。

Answer 1

$(function() {

                  $('.awesome-form .input-group input, textarea').focusout(function() {

                    var text_val = $(this).val();

                    if (text_val === "") {

                      $(this).removeClass('has-value');

                    } else {

                      $(this).addClass('has-value');

                    }

                  });

                });

                $(function() {
                  $.validator.setDefaults({
                    highlight: function(element) {
                      $(element)
                        .closest('.formInput')
                        .addClass('errorHighlight');
                    },
                    unhighlight: function(element) {
                      $(element)
                        .closest('.formInput')
                        .removeClass('errorHighlight');
                    }
                  });
                  $('.awesome-form').validate({
                    errorElement: 'div',
                    errorClass: 'formError',
                    errorContainer: '#errorPanel',
                    errorLabelContainer: '#errorPanel ul',
                    onkeyup:function(element) {
                   
                      $(element).valid();
                    },
                    wrapper: 'li',
                    rules: {
                      name: {
                        required: true
                      },
                      email: {
                        required: true,
                        email: true
                      },
                      message: {
                        required: true
                      }
                    },
                    messages: {
                      name: {
                        required: 'Please include at least a first name'
                      },
                      email: {

                        required: 'Please include your email address',
                        email: 'Invalid email address'
                      },
                      message: {
                        required: 'Please include a short message'
                      }
                    }
                  });
                });

.chosenContact {
  cursor: pointer;
  display: flex;
  box-sizing: border-box;
  width: 100px;
  flex-direction: column;
  align-items: flex-start;
  margin: 0 5px;
}
.chosenContact p {
  margin: 0;
  padding: 0;
  font-size: 14px;
}
label input {
  display: none;
}
label input[type="radio"]:checked + img {
  background: red;
  border: solid 4px red;
}
input,
textarea {
  background: none;
  border: solid 2px #232323;
  color: #232323;
  padding: 15px 40px;
  font-size: 18px;
  display: inline-block;
}
input:focus,
input:active,
textarea:focus,
textarea:active {
  outline: none;
}
input[type="text"],
input[type="email"],
textarea {
  border: none;
  border-bottom: 2px solid #232323;
  min-width: 300px;
}
input[type="text"]..errorHighlight,
input[type="email"].errorHighlight,
textarea.errorHighlight {
  width: 170px;
  background-color: red;
  max-height: 70px;
}
input[type="submit"]:active {
  color: white;
  background: red;
  border: red;
}
.input-group {
  display: inline-block;
  margin: 20px 0 20px 0;
  position: relative;
}
.input-group input,
textarea {
  padding: 15px 0px;
}
textarea {
  width: 100%;
}
.errorHighlight {
  border: none;
  background-color: red;
  border-bottom: 2px solid red;
}
.input-group label {
  position: absolute;
  top: 50%;
  left: 0px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  font-family: "Georgia", "Cambria", "Times New Roman", "Times", serif;
  font-style: italic;
  font-size: 18px;
  color: #999;
  pointer-events: none;
  -webkit-transition: all 0.15s ease-out 0s;
  transition: all 0.15s ease-out 0s;
}
.input-group input:focus + label,
.input-group input.has-value + label,
.input-group textarea:focus + label,
.input-group textarea.has-value + label {
  top: -10px;
  font-size: 12px;
  color: #aaa;
}
.input-group-submit {
  display: flex;
  justify-content: space-around;
  align-items: center;

<!DOCTYPE html>

<head>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.min.js"></script>
</head>

<body>
  <div class="contactUs">

    <form class="awesome-form" name="contactForm" action="phpScripts/contactForm.php" method="post">

      <div class="contactWho">

        <label class="chosenContact">
          <input type="radio" name="who" value="Boss" checked>
          <img src="http://www.placecage.com/100/100" alt="">
          <p class="contactStaffName">Boss Man</p>

        </label>

        <label class="chosenContact">
          <input type="radio" name="who" value="staff1">
          <img src="http://www.placecage.com/100/100" alt="">
          <p class="contactStaffName">Staff Member 1</p>
        </label>

        <label class="chosenContact">
          <input type="radio" name="who" value="staff2">
          <img src="http://www.placecage.com/100/100" alt="">
          <p class="contactStaffName">Staff Member 2</p>
        </label>

      </div>

      <div class="sayWhat">
        <div class="nameAndEmail">

          <div class="input-group">
            <input class="formInput" type="text" name="name">
            <label class="formLabel">Your Full Name</label>
          </div>

          <div class="input-group">
            <input class="formInput" type="email" name="email">
            <label class="formLabel">Your Email Address</label>
          </div>

        </div>

        <div class="input-group">
          <textarea class="formInput" name="message" rows="10"></textarea>
          <label class="formLabel">How Can I Help You?</label>
        </div>

        <div class="input-group-submit">
          <input type="submit" value="Contact Us">
        </div>
      </div>

    </form>

    <div id="errorPanel">
      <ul>

      </ul>
    </div>
  </div>
</body>

</html>