svelte-form-helper

• Lightweight form validation helper specifically designed for Svelte applications
• Extremely small footprint (1.79 KB minified)
• Enhances native browser form validation rather than replacing it
• Progressive enhancement approach - falls back to native validation if JavaScript is disabled
• Works seamlessly with SvelteKit Form Actions
• Supports all standard HTML form validation attributes and the Constraint Validation API

Key Features:

• Tiny size with minimal overhead
• SSR support (works without JavaScript)
• Dynamic form field handling (add/remove fields)
• Form-level validation state aggregation
• Automatic WAI-ARIA accessibility attributes
• Custom validation functions (sync or async)
• Fine-grained control over validation timing (onDirty/onTouched)
• Access to native ValidityState flags for custom messaging

Target Audience: Svelte developers looking for a lightweight, non-intrusive form validation solution that:

• Respects and enhances native browser validation
• Provides fine-grained control over validation behavior
• Offers accessibility out of the box
• Maintains small bundle size
• Works with SvelteKit

Example Resources:

• Basic Example
• Component Example

Validation Approach:

• Builds on standard HTML validation attributes (required, minlength, pattern etc.)
• Uses native ValidityState model for validation checks
• Allows custom validation functions (including async validation)
• Provides complete control over validation message display and styling

State Management:

• Form-level state tracking (dirty, touched, valid)
• Individual field state access
• Reactive stores for easy integration with Svelte templates

Styling Options:

• Data attributes for CSS targeting (data-show, data-dirty, data-touched)
• Works with both regular CSS and TailwindCSS
• Example configurations provided for both approaches

Component Helpers:

• Optional Validation and Hint components for simplified template syntax
• Still maintains minimal footprint when using manual validation display