更改高度适用于我的两个输入字段，但不适用于其他字段。为什么？

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元素调用它。