From Validation

by Vladimir Kutepov

HTML

<form novalidate>
  <p>Input: <input type="text" required /> <span></span></p>
  <p>Phone: <input type="tel" required /> <span></span></p>
  <p>Email: <input type="email" required /> <span></span></p>
  <p>Password: <input type="password" required pattern=".{0}|.{8,100}" data-pattern-mismatch="Password must be 8 to 100 symbols" /> <span></span></p>
  <button>Submit</button>
</form>

JavaScript

document.querySelector('form').addEventListener('submit', (event) => {
  event.preventDefault();

  [...event.target.elements].forEach(input => {
    if (typeof input.validity === 'object') {
      console.log(input, input.validity);
      if (input.validity.valueMissing) {
        input.nextElementSibling.innerText = 'Field is required';
      } else if (input.validity.typeMismatch) {
        input.nextElementSibling.innerText = input.dataset.typeMismatch || 'Type mismatch';
      } else if (input.validity.patternMismatch) {
        input.nextElementSibling.innerText = input.dataset.patternMismatch || 'Pattern mismatch';
      } else if (!input.validity.valid) {
        input.nextElementSibling.innerText = 'Field is invalid';
      } else {
        input.nextElementSibling.innerText = ''; // valid
      }
    } else {
      // no validation for old browsers
    }
  });
});