jQuery問題驗證onkeyup並突出顯示

Question

我遇到了jQuery驗證問題。這是我第一次使用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>