<form class="form" method="post" action="/">
  <div class="form-item">
    <input type="text" required minlength="10">
    <p class="error-message"></p>
  </div>
  <div class="form-item">
    <select required>
      <option value="">選択して下さい</option>
      <option value="1">選択肢1</option>
      <option value="2">選択肢2</option>
    </select>
    <p class="error-message"></p>
  </div>
  <div class="form-item">
    <button class="submit-button">実行</button>
  </div>
</form>
.form-item {
  width: 320px;
}
.error-message {
  background-color: #e12350;
  color: #fff; 
  font-size: 12px;
  padding: 4px;
  display: none;
}
.error-message.-show {
  display: block;
}
var form = document.querySelector('.form');
var submitButton = document.querySelector('.submit-button');

submitButton.addEventListener('click', function (e) {
  var invalids = form.querySelectorAll(':invalid');
  if (0 < invalids.length) {
    e.preventDefault();
    for (var i = 0; i < invalids.length; i++) {
      (function (idx) {
        var invalid = invalids[idx];
        var errorMessage = invalid.parentNode.querySelector('.error-message');
        errorMessage.innerText = invalid.validationMessage;
        errorMessage.classList.add('-show');
        invalid.addEventListener('change', function f() {
          this.removeEventListener('change', f);
          errorMessage.classList.remove('-show');
        });
      })(i);
    }
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.