Recipes

Validate before sending

Catch mistakes in the browser without losing the server checks.

HTML already validates a fair amount — required, type=email, minlength, pattern. Use those first; they need no code and work with the keyboard and screen readers.

contact.html

<input type="email" name="email" required>
<textarea name="message" required minlength="10"></textarea>

Custom messages

Take over the reporting when the built-in bubbles do not fit your design:

contact.js

form.addEventListener("submit", (event) => {
  if (!form.checkValidity()) {
    event.preventDefault();
    // Render your own errors from form.elements here.
    return;
  }
});

Client-side validation is a convenience, never a guarantee — anything posting directly to the endpoint skips it entirely. The server re-checks regardless, which is why an empty submission is rejected even if your page allowed it.