<form>
    <div>
      <label for="email">Email</label>
      <input id="email" type="email" required placeholder="example@example.com" />
    </div>
    <div>
      <label for="alpha">Alphanumeric Only</label>
      <input id="alpha" type="text" pattern="[a-zA-Z0-9]+" title="Only alphanumeric characters allowed" required />
    </div>
    <div>
      <label for="select">Select</label>
      <select required>
        <option value="">Select option</option>
        <option value="1">Option one</option>
      </select>
    </div>
    <div>
      <label for="password">Password</label>
      <input id="password" type="password" required />
    </div>
    <input type="submit" value="Log In" />
  </form>
body {
  padding: 2em;
  line-height: 1.5;
}

div {
  margin-bottom: 1em;
}

label {
  margin-bottom: 0.25em;
  display: block;
}

form.errors {
  :invalid {
    border-color: red;
  }
}
View Compiled
const inputs = document.querySelectorAll(`input, select, textarea`);
const form = document.querySelector(`form`);
const submitButton = document.querySelector(`input[type="submit"]`);

// for (const input of inputs) {
//   input.addEventListener('blur', (event) =>
//     // or target a direct parent or something...
//     form.classList.toggle("errors", !form.checkValidity())
//   })
// }

submitButton.addEventListener("click", (e) => {
  form.classList.toggle("errors", !form.checkValidity());
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.