JavaScript form validation

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Contact us</title>
    <style>
      *, *::before, *::after { box-sizing: border-box; }
      body {
        margin: 0;
        padding: 32px 16px;
        font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
        background: #f4f4f5;
        color: #18181b;
      }
      .card {
        max-width: 460px;
        margin: 0 auto;
        padding: 28px;
        background: #fff;
        border: 1px solid #e4e4e7;
        border-radius: 12px;
      }
      h1 { margin: 0 0 6px; font-size: 20px; }
      .sub { margin: 0 0 22px; font-size: 14px; color: #71717a; }
      .field { margin-bottom: 16px; }
      label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; }
      input, textarea, select {
        width: 100%;
        padding: 10px 12px;
        font: inherit;
        font-size: 14px;
        color: #18181b;
        background: #fff;
        border: 1px solid #d4d4d8;
        border-radius: 8px;
      }
      input:focus, textarea:focus, select:focus {
        outline: 2px solid #18181b;
        outline-offset: 1px;
        border-color: transparent;
      }
      textarea { min-height: 110px; resize: vertical; }
      button {
        width: 100%;
        padding: 11px 16px;
        font: inherit;
        font-size: 14px;
        font-weight: 500;
        color: #fff;
        background: #18181b;
        border: 0;
        border-radius: 8px;
        cursor: pointer;
      }
      button:hover { background: #3f3f46; }
      button:active { transform: scale(0.99); }
      button[disabled] { opacity: 0.6; cursor: default; }
      /* Hidden from people, filled in by bots. Never remove it. */
      .hp { display: none; }
      .error { margin: 6px 0 0; font-size: 12px; color: #b91c1c; }
      [aria-invalid='true'] { border-color: #b91c1c; }
    </style>
  </head>
  <body>
    <form id="form" class="card" action="https://app.portform.co/api/submit" method="POST" novalidate>
      <h1>Get in touch</h1>
      <p class="sub">We check the obvious things before sending.</p>

      <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
      <input type="checkbox" name="botcheck" class="hp" tabindex="-1" autocomplete="off" />

      <div class="field">
        <label for="name">Name</label>
        <input id="name" type="text" name="name" autocomplete="name" required minlength="2" />
        <p class="error"></p>
      </div>
      <div class="field">
        <label for="email">Email</label>
        <input id="email" type="email" name="email" autocomplete="email" required />
        <p class="error"></p>
      </div>
      <div class="field">
        <label for="message">Message</label>
        <textarea id="message" name="message" required minlength="10"></textarea>
        <p class="error"></p>
      </div>

      <button type="submit">Send message</button>
    </form>

    <script>
      const form = document.getElementById('form')

      function messageFor(field) {
        if (field.validity.valueMissing) return 'This field is required.'
        if (field.validity.typeMismatch) return 'That does not look like an email address.'
        if (field.validity.tooShort) return `At least ${field.minLength} characters, please.`
        return ''
      }

      function check(field) {
        const error = messageFor(field)
        field.closest('.field').querySelector('.error').textContent = error
        field.setAttribute('aria-invalid', error ? 'true' : 'false')
        return !error
      }

      // Validate on blur, then live once a field has already been flagged —
      // errors that appear mid-typing are noise, errors that never clear are worse.
      form.querySelectorAll('input[name], textarea[name]').forEach((field) => {
        field.addEventListener('blur', () => check(field))
        field.addEventListener('input', () => {
          if (field.getAttribute('aria-invalid') === 'true') check(field)
        })
      })

      form.addEventListener('submit', (event) => {
        const fields = [...form.querySelectorAll('input[required], textarea[required]')]
        const ok = fields.map(check).every(Boolean)
        if (!ok) {
          event.preventDefault()
          fields.find((f) => f.getAttribute('aria-invalid') === 'true').focus()
        }
      })
    </script>
  </body>
</html>