Lightweight, accessible, and zero-dependency. TypeScript-native with 98% test coverage. Define rules in HTML, handle the rest in JS.
Define validation rules in HTML attributes. Ctrovalidate handles the validation logic, error display, and accessibility.
<!-- Define rules directly in HTML -->
<div class="form-group">
<input
type="email"
name="user_email"
data-ctrovalidate-rules="required|email"
/>
<div class="error-message"></div>
</div>import { Ctrovalidate } from 'ctrovalidate';
// Initialize with configuration options
const validator = new Ctrovalidate(
document.querySelector('form'),
{ realTime: true }
);
// Validate programmatically
const isValid = await validator.validate();Ctrovalidate works with any JavaScript framework or vanilla JS.
| Framework | Status | Demo | Documentation |
|---|---|---|---|
| Vanilla JS | ✅ | View Demo | Guide |
| React 18+ | ✅ | View Demo | Integration |
| Next.js 15+ | ✅ | View Demo | Integration |
| Vue 3 | ✅ | View Demo | Integration |
| Alpine.js | ✅ | View Demo | Integration |
| Svelte | ✅ | - | Integration |
| HTMX | ✅ | - | Best Practices |
Styling: Works with Tailwind CSS, CSS Modules, Vanilla CSS, Bootstrap, or any CSS framework.