Question

所以我想创建一个表单字段，我要求用户输入他们的姓名，电子邮件，主题和消息。我正在尝试通过javascript编写代码，如果用户点击我发出的发送按钮并且没有填写任何或部分信息，那么在特定输入字段周围将有一个红色边框，他们没有填写所需信息。为了实现这一点，我在CSS中创建了一个类，通过javascript添加到那些输入字段，添加红色边框并略微降低输入字段的高度，以便通过添加红色边框添加的高度不会将输入字段移出的地方。除非我尝试降低输入字段的高度，否则一切正常。高度只会在名称和电子邮件字段中减少，但不会在我的任何其他字段上减少，因此当添加红色边框时，它会稍微移动输入字段。我尝试过很多东西，但我找不到任何解决方案。我将添加具有此问题的代码段。提前谢谢。

＆＃13;

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", "");
}

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

我会发布一个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元素。

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

1 个答案: