Validation

Chirp Form provides automatic client-side validation with customizable error messages.

Type validation

Validation is automatically applied based on field types:

• Email fields - must be valid email addresses
• URL fields - must be valid URLs
• Number fields - must be valid numbers within min/max range

Validation attributes

Chirp Form supports standard HTML5 validation attributes configured in your form settings:

• required - field must be filled
• minlength - minimum text length
• maxlength - maximum text length
• pattern - custom regex pattern
• min/max - for number inputs
• step - for number inputs

Error display

Validation errors are displayed below each invalid field:

1. Errors appear on blur (when leaving a field)
2. Errors clear on input (when typing)
3. All invalid fields show errors on form submit
4. The field is marked with aria-invalid="true"
5. Error messages use aria-live="polite" for screen readers

Custom validation messages

Override default error messages using attributes:

<chirp-form
  form-id="YOUR_FORM_ID"

  value-missing-message="Please fill out this field"
  type-mismatch-message="Please enter a valid email"
  too-short-message="Must be at least 3 characters"
  too-long-message="This field is too long"
  pattern-mismatch-message="Please match the required format"
  range-overflow-message="Number is too large"
  range-underflow-message="Number is too small"
  step-mismatch-message="Invalid step value"
  bad-input-message="Invalid input"
>
</chirp-form>

Available validation message attributes:

• value-missing-message - required field is empty
• type-mismatch-message - input doesn't match type (email, url, etc.)
• too-short-message - input is shorter than minlength
• too-long-message - input is longer than maxlength
• pattern-mismatch-message - input doesn't match pattern
• range-overflow-message - number is greater than max
• range-underflow-message - number is less than min
• step-mismatch-message - number doesn't match step value
• bad-input-message - browser can't parse input

Custom error styling

Style invalid fields and error messages using CSS parts:

chirp-form::part(input)[aria-invalid="true"] {
  border-color: #dc2626;
  background-color: #fef2f2;
}

chirp-form::part(invalid) {
  color: #dc2626;
  font-size: .875rem;
  margin-top: .25rem;
}

Or use CSS custom properties:

chirp-form {
  --error-message-color: #dc2626;
  --input-border: #e5e7eb;
}

chirp-form::part(input)[aria-invalid="true"] {
  border-color: var(--error-message-color);
}

Validation events

Listen for validation events:

document.querySelector("chirp-form").addEventListener("chirp-form:field:invalid", (event) => {
  console.log("Invalid field:", event.detail.field)
  console.log("Validation error:", event.detail.validity)
  console.log("Error message:", event.detail.message)
})

Server-side validation

Server-side validation is essential for security (client-side validation can be bypassed) and complex business rules like database checks. Errors are displayed the same way as client-side validation: below the invalid field.