the few as many

Border on invalid

/* ❌ JavaScript state management */
form.addEventListener('input', (e) => {
  if (!form.checkValidity()) {
    form.classList.add('error');
  } else {
    form.classList.remove('error');
  }
});

.error { border-color: red; }

/* ✅ Pure CSS reactivity */
form:has(:invalid:not(:placeholder-shown)) {
  border-color: #e91e63;
  background: #fef0f3;
}

form:has(:valid) {
  border-color: #0a7;
  background: #f0fdf4;
}