How does native form validation work?

The browser can block submission and show a message when a control violates its constraints. That gives a basic layer of validation before any JavaScript runs, but it is a convenience, not a security boundary.

<form>
  <label for="username">Username</label>
  <input
    id="username"
    name="username"
    required
    minlength="3"
    maxlength="20"
    pattern="[a-z0-9_]+"
  />

  <label for="age">Age</label>
  <input id="age" name="age" type="number" min="18" max="120" />

  <button type="submit">Create account</button>
</form>

The constraint API

• checkValidity() returns whether a control or form satisfies its constraints
• reportValidity() shows the browser messages
• validity exposes flags such as valueMissing, typeMismatch and patternMismatch
• setCustomValidity() lets you attach a custom message, then clear it when fixed
• novalidate on the form disables native validation when you need full control

Native messages are not consistent across browsers and may not be translated well. For critical forms, provide inline error text that is linked with aria-describedby and announced when it appears.