Configuration Options
Ctrovalidate is designed with sensible defaults, but it provides deep customization for production requirements. You can pass an options object as the second argument to the Ctrovalidate constructor.
import { Ctrovalidate } from 'ctrovalidate';
const validator = new Ctrovalidate(document.querySelector('form'), {
realTime: true,
errorClass: 'field-error',
logLevel: Ctrovalidate.LogLevel.WARN,
});Available Options
realTime
- Type:
boolean - Default:
true - Description: When enabled, the library automatically attaches
blurandinputlisteners to every tracked field. TIP
For long, complex forms,
realTimeprovides the best UX by preventing "error shock" at the end of the form.
logLevel
- Type:
Ctrovalidate.LogLevel(enum) - Default:
LogLevel.NONE - Description: Controls console output detail.
- Levels:
NONE: No logs.ERROR: Only critical internal failures.WARN: Rule execution issues and configuration warnings.INFO: Initialization steps and field discovery info.DEBUG: Full internal state transitions and event logs.
errorClass
- Type:
string - Default:
'is-invalid' - Description: The class added to the input element itself when validation fails.
IMPORTANT
Ctrovalidate also adds
aria-invalid="true"automatically to the element whenever this class is present.
errorMessageClass
- Type:
string - Default:
'error-message' - Description: The class identifier used to find the error container for each field.
How discovery works: By default, the library looks for an element with this class that shares the same parent as the input element. If not found, it continues up the DOM tree (up to 3 levels) to find a logical container.
pendingClass
- Type:
string - Default:
'is-validating' - Description: Applied to the field while asynchronous rules are executing.
- Example Usage: Use this class to show a spinner or disable the submit button during a "Username Available" check.
Advanced: Global Configuration
While the constructor handles instance-specific settings, some behaviors are global.
Ctrovalidate.LogLevel
The enum used for logging. Always use the static property to ensure type safety.
import { Ctrovalidate } from 'ctrovalidate';
console.log(Ctrovalidate.LogLevel.DEBUG); // 4Next Steps
- Built-in Rules — Explore the rule library.
- Static Methods — Learn how to add custom rules globally.