更改高度適用於我的兩個輸入字段，但不適用於其他字段。爲什麼？

Question

所以我試圖做一個表單域，我要求用戶輸入他們的名字，電子郵件，主題和消息。我正在嘗試通過javascript編寫代碼，如果用戶點擊我發送的發送按鈕，並且沒有任何或部分信息未填寫，則會在該特定輸入字段周圍出現一個紅色邊框，其中沒有填寫所需的信息。爲了做到這一點，我在CSS中添加了一個類，它通過javascript添加到這些輸入字段中，添加了紅色邊框並略微減少了輸入字段的高度，以便通過添加紅色邊框添加的高度不會將輸入字段移出的地方。一切工作正常，除非我試圖減少輸入字段的高度。高度只會在名稱和電子郵件字段中減少，但不會在我的任何其他字段中增加，因此當添加紅色邊框時，它會稍微移動輸入字段。我嘗試了很多東西，但我找不出任何解決方案。我將添加具有此問題的代碼段。提前致謝。

var validate_contact_field = function() { 
 
    var name = document.getElementById("name_field"); 
 
    var email = document.getElementById("email_field"); 
 
    var subject = document.getElementById("contact_subject_field"); 
 
    var message = document.getElementById("contact_message_field"); 
 
    if (name.value === "" && email.value === "" && subject.value === "" && 
 
    message.value === "") { 
 
    document.getElementById("valid").style.display = "none"; 
 
    document.getElementById("invalid").style.display = "inline-block"; 
 
    document.getElementById("invalid").style.color = "red"; 
 
    document.getElementById("invalid").innerHTML = "You did not enter any \ 
 
     contact information"; 
 
    name.className = name.className + " contact_error"; 
 
    email.className = email.className + " contact_error"; 
 
    } 
 
} 
 

 
var input_focus_name = function() { 
 
    var name = document.getElementById("name_field"); 
 
    name.className = name.className.replace(" contact_error", ""); 
 
} 
 

 
var input_focus_email = function() { 
 
    var email = document.getElementById("email_field"); 
 
    email.className = email.className.replace(" contact_error", ""); 
 
}

span { 
 
    color: rgb(79, 87, 170); 
 
} 
 

 
input { 
 
    text-indent: 5px; 
 
    font-size: 14px; 
 
    color: rgba(0, 0, 0, 0.5); 
 
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; 
 
    border: none; 
 
} 
 

 
input:focus { 
 
    outline: none; 
 
} 
 

 
input::-webkit-input-placeholder { 
 
    font-family: 'myFont', Arial, Helvetica, sans-serif; 
 
    font-size: 15px; 
 
    opacity: 0.5; 
 
} 
 

 
textarea { 
 
    padding-left: 7px; 
 
    padding-top: 5px; 
 
    padding-right: 7px; 
 
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; 
 
    font-size: 14px; 
 
    color: rgba(0, 0, 0, 0.5); 
 
    line-height: 20px; 
 
    resize: none; 
 
    border: none; 
 
} 
 

 
textarea:focus { 
 
    outline: none; 
 
} 
 

 
textarea::-webkit-input-placeholder { 
 
    font-size: 15px; 
 
    opacity: 0.5; 
 
    font-family: 'myFont', Arial, Helvetica, sans-serif; 
 
} 
 

 
#contact_inner_div_2 { 
 
    margin-top: 6.7%; 
 
    width: 60%; 
 
    float: left; 
 
} 
 

 
.contact_name_and_email_fields_span { 
 
    width: 35%; 
 
    float: left; 
 
} 
 

 
.contact_name_and_email_fields { 
 
    width: 147px; 
 
    height: 30px; 
 
} 
 

 
#contact_subject_field { 
 
    width: 313px; 
 
    height: 30px; 
 
    margin-top: 10px; 
 
} 
 

 
#contact_message_field { 
 
    width: 301px; 
 
    height: 141px; 
 
    margin-top: 10px; 
 
} 
 

 
#contact_send_button { 
 
    display: block; 
 
    margin-top: 7px; 
 
    margin-left: auto; 
 
    margin-right: 60%; 
 
    background-color: rgb(79, 87, 170); 
 
    border: none; 
 
    width: 317px; 
 
    height: 40px; 
 
    cursor: pointer; 
 
} 
 

 
#text_inside_of_buttion { 
 
    color: black; 
 
    opacity: 0.5; 
 
    font-size: 15px; 
 
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; 
 
} 
 

 
.text_align { 
 
    text-align: center; 
 
} 
 

 
#contact_div_for_span_validator { 
 
    margin-top: 2.5%; 
 
    width: 317px; 
 
} 
 

 
.contact_validator_spans { 
 
    display: none; 
 
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; 
 
    font-size: 14px; 
 
} 
 

 
.contact_error { 
 
    border: 1px solid red; 
 
    width: 146px; 
 
    height: 28px; 
 
}

<form> 
 
    <span id="contact_inner_div_2"> 
 
      <span class="contact_name_and_email_fields_span"> 
 
      <input type="text" placeholder="Name" 
 
      class="contact_name_and_email_fields" id="name_field" 
 
      onfocus="input_focus_name();"> 
 
      </span> 
 
    <span class="contact_name_and_email_fields_span"> 
 
      <input type="text" placeholder="Email" 
 
      class="contact_name_and_email_fields" id="email_field" 
 
      onfocus="input_focus_email();"> 
 
      </span> 
 
    <input type="text" placeholder="Subject" id="contact_subject_field" onfocus="input_focus();"> 
 
    <textarea placeholder="Message" id="contact_message_field" onfocus="input_focus();"></textarea> 
 
    <button type="button" id="contact_send_button" onclick="validate_contact_field();"> 
 
      <span id="text_inside_of_buttion">Send</span> 
 
      </button> 
 
    <div class="text_align" id="contact_div_for_span_validator"> 
 
    <span class="contact_validator_spans" id="valid"> 
 
       Validation Passed 
 
      </span> 
 
    <span class="contact_validator_spans" id="invalid"> 
 
       Validation Failed 
 
      </span> 
 
    </div> 
 
    </span> 
 
</form>

我會發佈一個鏈接的jsfiddle但由於某種原因它看起來像我的JavaScript並沒有做這個工作，因爲某些原因。

Answer 1

function checkField(field) { 
    if (field.value == '') { 
     //add the error class (border) 
     field.classList.add("errorClass") 

    } 
    else if(field.classList.contains("errorClass")){ 
     //else if its not empty and has the class remove it 
      field.classList.remove("errorClass"); 
    } 
    } 

然後用

onblur="checkField(this);"

與HTML元素調用它。