JSFiddle - React, Tailwind, and code Playground

HTML

<form id="registration__form" action="form_handler.php" class="form" method="POST" name="form">
  <div class="d-table">

    <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>
  </div>
  <input type="submit" name="submit" id="submit" class="green-button submit" value="submit">
</form>

CSS

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

JavaScript

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