CtrovalidateCommand Palette
Search for a command to run...
CtrovalidateSearch for a command to run...
Last updated June 9, 2026
This guide covers the installation and initialization of Ctrovalidate for DOM-based projects.
Ctrovalidate is distributed as scoped packages via NPM. For browser-based validation, use the ctrovalidate-browser package.
::: code-group
npm install ctrovalidate-browseryarn add ctrovalidate-browserpnpm add ctrovalidate-browser:::
For prototyping or simple environments, load the library via a script tag.
<script type="module">
import { Ctrovalidate } from 'https://cdn.jsdelivr.net/npm/ctrovalidate-browser@1.0.0/dist/index.js';
// Implementation
</script>The following example demonstrates a field validation setup using the declarative API.
Define rules using the data-ctrovalidate-rules attribute.
<form id="registration-form" novalidate>
<div class="form-group">
<label for="email">Email Address</label>
<input
type="email"
id="email"
name="email"
data-ctrovalidate-rules="required|email"
/>
<div class="error-message"></div>
</div>
<div class="form-group">
<label for="password">Password</label>
<input
type="password"
id="password"
name="password"
data-ctrovalidate-rules="required|minLength:8"
/>
<div class="error-message"></div>
</div>
<button type="submit">Submit</button>
</form>Initialize the Ctrovalidate controller to manage the validation lifecycle.
import { Ctrovalidate } from 'ctrovalidate-browser';
const form = document.querySelector('#registration-form');
// Create the validator instance
const validator = new Ctrovalidate(form, {
realTime: true,
errorClass: 'is-invalid',
errorMessageClass: 'error-feedback',
pendingClass: 'ctrovalidate-pending'
});
// Handle form submission
form.addEventListener('submit', async (e) => {
e.preventDefault();
const isValid = await validator.validate();
if (isValid) {
const formData = new FormData(form);
console.log('Valid Submission Payload:', Object.fromEntries(formData));
// Proceed with API call
} else {
console.error('Validation Failed:', results);
}
});data-ctrovalidate-rules.blur and input events when realTime is enabled.aria-invalid states.validate() method executes the rule engine and returns a boolean state.