Q:

getElementsByClassName.style is undefined

I want to change default error message for inputs in browser. I turn on all default messages, create hidden div with text and I want to show this div for every invalid input. Text inside div is different and for some inputs I don't need text error. 
My HTML form:
<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>

My css is very simple 
.error-message-2 {
  display: none;
  color: #fd1d1e;
 }

My 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]);
}

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

What is wrong?
P.S. JSFiddle here

A:

this is because getElementsByClassName returns live HTMLCollection of found elements, you can not apply style on a collection.  You will have to select a particular element by index.

