How samcbdev/strictlyjs works
Purpose and Distribution
StrictlyJS is a dependency-free, browser-side JavaScript form-validation library. Consumers load the library directly from a CDN or local script and instantiate Strictly against a form, field, or container. The distributable implementation is strictly.js; optional default validation styling is strictly.css.
Paths: strictly.js, strictly.css, package.json
Browser Entry and DOM Scope
The public entry point is the global Strictly class exposed by strictly.js. new Strictly(target, options) resolves a CSS-selector target and operates on matching form controls. The library is HTML-driven: native attributes plus data-strictly-* attributes declare constraints, avoiding a separate schema or server component.
Paths: strictly.js, index.html
Initialization and Event Control
Construction configures validation behavior and attaches browser event handling for input/change and form submission. Live validation can be immediate or debounced; initError controls whether errors appear before submission. In restrict: 'oninput' mode, invalid edits may be corrected/restricted during typing. Form submission is intercepted for validation; StrictlyJS intentionally does not perform native submission.
Paths: strictly.js
Validation Pipeline
validate(options) is the central asynchronous boundary. It gathers field values, evaluates applicable built-in constraints, awaits custom synchronous or asynchronous rules, then resolves a normalized result: { isValid, values, errors }. Built-in rule coverage includes required/type/format, numeric and length ranges, cross-field equality, grouped checkbox/select limits, word/character constraints, and file metadata constraints.
Paths: strictly.js
Rule Declaration and Extensibility
Field attributes are parsed into ordered rule evaluation, including multiple comma-separated data-strictly-custom validators and optional parameters. Global extension points, Strictly.registerValidator(ruleName, fn) and Strictly.registerErrorMessage(ruleName, msg), let applications add reusable rules. Validator functions may return booleans, corrected values, or Promises, making application/network-backed checks possible without coupling the library to an external service.
Paths: strictly.js
Result, UI, and Application Boundary
Validation produces structured values/errors for application code and separately renders field state in the DOM. Error rendering supports first-versus-all errors, configurable tags/classes/relative placement, and an errorPlacement callback for custom containers such as summaries. Validation lifecycle callbacks (onValidate, onSuccess, onError) are the integration boundary: applications decide whether and how to submit valid values, e.g., via fetch.
Paths: strictly.js, strictly.css
Runtime and Infrastructure
Runtime is a standard web browser with DOM, form-control, event, and Promise support; the library has no declared runtime dependency or backend. Distribution is intended through jsDelivr/npm CDN URLs or local static assets. index.html is the repository’s browser-facing example/demo entry, not an application server.
Paths: index.html, package.json, strictly.js
Components 15
Distribution
- Package metadata · Dependency-free package and CDN distribution metadata.
package.json - Browser demo · Static example entry; not an application server.
index.html
Browser Runtime
- Strictly global class · Public entry point instantiated with a form, field, container, or selector.
strictly.js - Web browser · Provides DOM, form events, and Promise support.
- Target controls · HTML attributes and data-strictly-* declarations define constraints.
- Event control · Runs live/debounced validation, restricts edits when configured, and intercepts submission.
strictly.js
Validation Engine
- Rule declaration parser · Builds ordered rules from native and data-strictly-* attributes.
strictly.js - validate(options) · Central asynchronous validation boundary.
strictly.js - Built-in constraints · Checks required, format, ranges, equality, grouped limits, text, and file constraints.
strictly.js - Custom validators · Registered validators may be synchronous, corrective, or Promise-based.
strictly.js - Normalized result · Returns isValid, values, and errors.
strictly.js
Application Integration
- Error UI renderer · Renders field state and supports custom error placement.
strictly.js - Default validation styles
strictly.css - Lifecycle callbacks · onValidate, onSuccess, and onError let consumers handle valid values.
strictly.js - Consumer application · Optionally submits validated values, for example with fetch.
Connections 17
- Package metadata → Strictly global class: distributes
- Browser demo → Strictly global class: loads
- Web browser → Strictly global class: executes
- Strictly global class → Target controls: resolves target
- Strictly global class → Event control: configures
- Event control → validate(options): triggers
- Target controls → Rule declaration parser: declares rules
- Rule declaration parser → validate(options): supplies ordered rules
- validate(options) → Built-in constraints: evaluates
- validate(options) → Custom validators: awaits
- Built-in constraints → Normalized result: contributes errors and values
- Custom validators → Normalized result: contributes errors and values
- Normalized result → Error UI renderer: renders field state
- Default validation styles → Error UI renderer: styles
- Normalized result → Lifecycle callbacks: notifies
- Lifecycle callbacks → Consumer application: hands off valid values
- Consumer application → Custom validators: registers reusable rules