在使用jquery驗證時，我應該對這個特定的css進行哪些更改？

Question

我有一個基本的註冊表格。對於輸入字段的樣式，我的css代碼如下，但我使用的代碼來自演示中的代碼：http://tympanus.net/codrops/2015/01/08/inspiration-text-input-effects/

我特別使用第二個示例（稱爲Hoshi）。現在，當你點擊輸入字段，藍色底部邊框被動畫。

我正在使用Jquery驗證插件，所以我的js腳本代碼是下面的一個。我無法改變錯誤的CSS。例如，當用戶忘記填寫一個字段，但點擊提交時，我希望輸入字段具有紅色邊框底部，直到其驗證。但我絕對不知道如何實現這一點。任何見解都被讚賞！謝謝！

$(document).ready(function(){ 
 
\t $('#tbi-form').validate({ 
 
\t \t rules: { 
 
\t \t \t First_Name: { 
 
\t \t \t \t required: true, 
 
\t \t \t \t maxlength: 50 
 
\t \t \t }, 
 
\t \t \t Last_Name: { 
 
\t \t \t \t required: true 
 
\t \t \t }, 
 
\t \t \t Phone: { 
 
\t \t \t \t required: true 
 
\t \t \t }, 
 
\t \t \t zip: { 
 
\t \t \t \t required: true, 
 
\t \t \t \t maxlength: 20, 
 
\t \t \t \t digits: true 
 
\t \t \t }, 
 
\t \t \t birth_month: { 
 
\t \t \t \t required: true 
 
\t \t \t }, 
 
\t \t \t Email: { 
 
\t \t \t \t required: true, 
 
\t \t \t \t maxlength: 100 
 
\t \t \t }, 
 
\t \t \t Email_Confirm: { 
 
\t \t \t \t required: true, 
 
\t \t \t \t equalTo: "#Email" 
 
\t \t \t }, 
 
\t \t \t Referral: { 
 
\t \t \t \t required: true, 
 
\t \t \t \t maxlength: 20 
 
\t \t \t } 
 
\t \t }, 
 
\t \t messages: { 
 
\t \t \t First_Name: "Please enter your first name", 
 
\t \t \t Last_Name: "Please enter your last name", 
 
\t \t \t Email: "Please enter your Email", 
 
\t \t \t Email_Confirm: { 
 
\t \t \t \t required: "Please enter your email", 
 
\t \t \t \t equalTo: "Please make sure the email you entered is accurate" 
 
\t \t \t } 
 
\t \t }, 
 
\t \t errorElement: 'div' 
 
\t }); 
 
});

.input__field--form { 
 
\t margin-top: 1em; 
 
\t padding: 1.5em 0em 1.2em 0.2em; 
 
\t width: 100%; 
 
\t background: transparent; 
 
\t color: #595F6E; 
 
\t font-size: 85.25%; 
 
} 
 

 
.input__label--form { 
 
\t position: absolute; 
 
\t bottom: 0; 
 
\t left: 0; 
 
\t padding: 0 0.25em; 
 
\t width: 100%; 
 
\t height: calc(100% - 1em); 
 
\t text-align: left; 
 
\t pointer-events: none; 
 
} 
 

 
.input__label-content--form { 
 
\t position: absolute; 
 
} 
 

 
.input__label--form::before, 
 
.input__label--form::after { 
 
\t content: ''; 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
\t width: 100%; 
 
\t height: calc(100% - 5px); 
 
\t border-bottom: 1px solid #B9C1CA; 
 
} 
 

 
.input__label--form::after { 
 
\t margin-top: 0px; 
 
\t border-bottom: 4px solid red; 
 
\t -webkit-transform: translate3d(-100%, 0, 0); 
 
\t transform: translate3d(-100%, 0, 0); 
 
\t -webkit-transition: -webkit-transform 0.3s; 
 
\t transition: transform 0.3s; 
 
} 
 

 
.input__label--form-color-1::after { 
 
\t border-color: #00A0E2; 
 
} 
 

 
.input__field--form:focus + .input__label--form::after, 
 
.input--filled .input__label--form::after { 
 
\t -webkit-transform: translate3d(0, 0, 0); 
 
\t transform: translate3d(0, 0, 0); 
 
} 
 

 
.input__field--form:focus + .input__label--form .input__label-content--form, 
 
.input--filled .input__label-content--form { 
 
\t -webkit-animation: anim-1 0.3s forwards; 
 
\t animation: anim-1 0.3s forwards; 
 
} 
 

 
@-webkit-keyframes anim-1 { 
 
\t 50% { 
 
\t \t opacity: 0; 
 
\t \t -webkit-transform: translate3d(1em, 0, 0); 
 
\t \t transform: translate3d(1em, 0, 0); 
 
\t } 
 
\t 51% { 
 
\t \t opacity: 0; 
 
\t \t -webkit-transform: translate3d(-1em, -40%, 0); 
 
\t \t transform: translate3d(-1em, -40%, 0); 
 
\t } 
 
\t 100% { 
 
\t \t opacity: 1; 
 
\t \t -webkit-transform: translate3d(0, -40%, 0); 
 
\t \t transform: translate3d(0, -40%, 0); 
 
\t } 
 
} 
 

 
@keyframes anim-1 { 
 
\t 50% { 
 
\t \t opacity: 0; 
 
\t \t -webkit-transform: translate3d(1em, 0, 0); 
 
\t \t transform: translate3d(1em, 0, 0); 
 
\t } 
 
\t 51% { 
 
\t \t opacity: 0; 
 
\t \t -webkit-transform: translate3d(-1em, -40%, 0); 
 
\t \t transform: translate3d(-1em, -40%, 0); 
 
\t } 
 
\t 100% { 
 
\t \t opacity: 1; 
 
\t \t -webkit-transform: translate3d(0, -40%, 0); 
 
\t \t transform: translate3d(0, -40%, 0); 
 
\t } 
 
}

Answer 1

參考the documentation。您有兩個選項errorClass and validClass，分別默認爲error和valid。您可以將它們更改爲您需要的任何CSS類名稱...

$(document).ready(function(){ 
    $('#tbi-form').validate({ 
     errorClass: "myClass", 
     validClass: "myOtherClass", 
     errorElement: 'div', 
     rules: { 
      First_Name: { 
       ..... 

該插件將這些類應用於錯誤消息和輸入元素。所以，你的CSS中，你就必須針對這兩種東西分開......

input[type="text"].myClass { 
    /* CSS properties applied to text inputs on error */ 
} 

input[type="text"].myOtherClass { 
    /* CSS properties applied to text inputs when valid */ 
    /* may not be needed since the validated elements usually look the same as before */ 
} 

由於您的錯誤信息的標籤分別更改爲div元素...

div.myClass { 
    /* CSS properties applied to error label on error */ 
} 

div.myOtherClass { 
    /* CSS properties applied to error label when valid */ 
    /* probably not needed since you don't show an error label when valid */ 
}