getElementsByClassName.style未定义

Question

我想更改浏览器中输入的默认错误消息。我打开所有的默认消息，用文本创建隐藏的div，我想为每个无效的输入显示这个div。div中的文本是不同的，对于某些输入，我不需要文本错误。

我的HTML表单：

<form id="registration__form" action="form_handler.php" class="form" method="POST" name="form">

​

<div>
  <label for="email">email</label>
</div>
<div>
  <input id="email" type="email" name="email" required="required">
  <div class="error-message-2">error 1</div>
</div>
<div>
  <label for="number">number</label>
</div>
<div>
  <input id="number" type="text" name="number" required="required">
  <div class="error-message-2">error 2</div>
</div>
<div>
  <label for="company">company</label>
</div>
<div>
  <input id="company" type="text" name="company" required="required">
</div>
<div>
  company
</div>
<div>
  <input type="password" id="field" data-indicator="pwindicator" name="password" required="required">
</div>
<div>
  <div id="pwindicator" class="pwindicator">
    <div class="bar">
    </div>
    <div class="label"></div>
  </div>
</div>

我的css很简单

.error-message-2 {
  display: none;
  color: #fd1d1e;
 }

我的JS

    function replaceValidationUI(form) {
  // Suppress the default bubbles
  form.addEventListener("invalid", function(event) {
    event.preventDefault();
  }, true);

  // Support Safari, iOS Safari, and the Android browser—each of which do not prevent
  // form submissions by default
  form.addEventListener("submit", function(event) {
    if (!this.checkValidity()) {
      event.preventDefault();
    }
  });

  var submitButton = form.querySelector("button:not([type=button]), input[type=submit]");
  submitButton.addEventListener("click", function(event) {
    var invalidFields = form.querySelectorAll(":invalid"),
      errorMessages = form.querySelectorAll(".error-message"),
      parent;

    // Remove any existing messages
    for (var i = 0; i < errorMessages.length; i++) {
      errorMessages[i].parentNode.removeChild(errorMessages[i]);
    }


    for (var i = 0; i < invalidFields.length; i++) {
      parent = invalidFields[i].parentNode;
      parent.getElementsByClassName("error-message-2").style.display = "block";
    }

    // If there are errors, give focus to the first invalid field
    if (invalidFields.length > 0) {
      invalidFields[0].focus();
    }
  });
}

// Replace the validation UI for all forms
var forms = document.querySelectorAll("form");
for (var i = 0; i < forms.length; i++) {
  replaceValidationUI(forms[i]);
}

这里出现了'getElementsByClassName.style是未定义‘的错误

for (var i = 0; i < invalidFields.length; i++) {
                    parent = invalidFields[i].parentNode;
                    parent.getElementsByClassName("error-message-2").style.display = "block";
            }

怎么啦？

P.S. JSFiddle在这里

Answer 1

这是因为getElementsByClassName返回已找到的元素的活动HTMLCollection，所以不能将样式应用于集合。您必须按索引选择特定的元素。