Field Validation

Patterns for validating user input before it reaches your backend.

Required Fields

Mark fields as required and show inline errors when they are left empty on submit.

<input
  required
  className="border rounded px-3 py-2"
  placeholder="Email"
/>
<span className="text-red-400 text-sm">
  This field is required
</span>

Pattern Matching

Use the pattern attribute for regex-based client-side checks.

<input
  pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,}$"
  title="Enter a valid email"
/>

Length Constraints

Enforce minimum and maximum lengths with native attributes.

<input
  minLength={3}
  maxLength={50}
  placeholder="Username"
/>

Custom Validation

Combine setCustomValidity with constraint validation API for complex rules.

const input = e.target
if (input.value !== confirmValue) {
  input.setCustomValidity("Fields must match")
} else {
  input.setCustomValidity("")
}

Always validate on the server too. Client-side validation is for UX, not security.