Conversation
- Convert from npm to pnpm with packageManager field - Update all dependencies to latest versions: - @jdlien/validator-utils: 1.2.8 → 2.0.0 - vite: 6.x → 7.3.1 - vitest: 3.x → 4.0.18 - jsdom: 26.x → 27.4.0 - typescript: 5.8.x → 5.9.3 - Add scripts/measure-wire-size.mjs and size:wire command - Add tests/setup.ts with CSS.supports mock for jsdom - Add v2-analysis.md with modernization planning Signed-off-by: JD Lien <jd@jdlien.com>
Preparing for v2 release with project instructions for AI assistance. Signed-off-by: JD Lien <jd@jdlien.com>
…d new validation options - Add scrollToError option to scroll and focus first invalid input on validation failure - Add min/max numeric value validation via data-min/data-max attributes - Pre-split class strings in constructor for better performance - Optimize MutationObserver auto-destroy with requestIdleCallback when available - Consolidate ValidationSuccessEvent/ValidationErrorEvent into unified ValidationEvent class - Update messages option type from object to Record<string, string> - Remove duplicate types.d.ts file - Update copyright year to 2026 - Add comprehensive tests for all new features (226 tests, 100% line coverage) Signed-off-by: JD Lien <jd@jdlien.com>
README.md: - Add data-min/data-max attributes for numeric value validation - Add ERROR_MIN_VALUE and ERROR_MAX_VALUE to messages list - Add scrollToError option documentation - Add breaking changes section for ValidationEvent and types.d.ts removal Demo: - Add "Number with Min/Max" input example showing data-min/data-max - Enable scrollToError option to demonstrate scroll behavior - Update intro text to mention scroll feature Signed-off-by: JD Lien <jd@jdlien.com>
- Test error element lookup when id-based error doesn't exist but name-based does - Test validateValue with non-numeric input (NaN branch) - Test submitHandler when callbacks are not set - Test preventDefault blocking form submission - Fix ArrowDown tests to directly invoke handler 231 tests passing, 100% line coverage Signed-off-by: JD Lien <jd@jdlien.com>
- Add appearance-none to hide native browser dropdown arrow - Add background-repeat: no-repeat to prevent chevron tiling - Adjust chevron position for balanced padding (0.4rem from right) - Remove unnecessary !important from background-image - Migrate @layer components to @Utility API per Tailwind v4 guidelines Signed-off-by: JD Lien <jd@jdlien.com>
- Create reusable <form-field> custom element (384 lines) - Refactor demo to use custom element (915 → 289 lines, 68% reduction) - Support all field types: text, number, date, select, radio, checkbox, textarea, color - Preserve all validator functionality: validation, error display, hints - Color picker with swatch sync working Signed-off-by: JD Lien <jd@jdlien.com>
- Convert form-field.js to TypeScript (.ts) - Replace innerHTML/template strings with DOM API using el() helper function - Add proper TypeScript types for attributes, options, and field types - Fix validator initialization timing by using module script with customElements.whenDefined() to ensure custom elements render before validator attaches Signed-off-by: JD Lien <jd@jdlien.com>
Add 'input' prefix to type attribute selectors in demo-src.css so they don't match custom elements like form-field that also have type attributes. Signed-off-by: JD Lien <jd@jdlien.com>
TypeScript modules can't be served directly from static servers - they need to be compiled to JavaScript. Reference .js in HTML so it works on both Vite (dev) and static servers (production). Signed-off-by: JD Lien <jd@jdlien.com>
Signed-off-by: JD Lien <jd@jdlien.com>
- Use circular outline instead of box-shadow ring for radio button focus - Update demo color scheme from gray to indigo - Add undici-types dependency and --skipLibCheck to fix TypeScript errors Signed-off-by: JD Lien <jd@jdlien.com>
Signed-off-by: JD Lien <jd@jdlien.com>
Signed-off-by: JD Lien <jd@jdlien.com>
…outline) Signed-off-by: JD Lien <jd@jdlien.com>
- Add scrollToErrorDelay option to delay scroll after validation errors
- Fix smooth scrolling by using focus({ preventScroll: true })
- Add animated error message transitions using opacity/max-height
- Move focus ring to parent label for checkbox/radio groups (focus-within)
- Add gradient backgrounds to select elements with chevron
- Make form-field custom element display: block for space-y support
- Add tests for scrollToErrorDelay and preventScroll behavior
Signed-off-by: JD Lien <jd@jdlien.com>
- Fix inputChangeHandler to handle HTMLSelectElement and HTMLTextAreaElement (previously only handled HTMLInputElement, causing errors not to clear) - Add tests for select element validation and change handling - Add color input focus ring wrapper (focus-within on parent) - Add wavy SVG background pattern to demo body - Change error colors from red to pink in demo - Customize errorMainClasses and errorInputClasses in demo Signed-off-by: JD Lien <jd@jdlien.com>
- Add @tailwindcss/vite plugin for CSS HMR - Split demo into index.html (prod) and index.dev.html (dev with .ts imports) - Update build script to include demo build automatically - Add Alexandria font with font-alexandria utility class - Improve demo form styling (input padding, submit button) Signed-off-by: JD Lien <jd@jdlien.com>
Signed-off-by: JD Lien <jd@jdlien.com>
Signed-off-by: JD Lien <jd@jdlien.com>
Signed-off-by: JD Lien <jd@jdlien.com>
Signed-off-by: JD Lien <jd@jdlien.com>
These are build artifacts compiled from TypeScript source files and should not be tracked in version control. Signed-off-by: JD Lien <jd@jdlien.com>
Extends the existing integer arrow key support to number/float/decimal types: - ArrowUp/Down increments/decrements value by step (default 1) - Respects data-min/data-max and native min/max attributes - Use data-arrow-step to customize step size (e.g., "0.5") - Set data-arrow-step="" (empty string) to disable the feature - Handles floating point precision correctly - Integers default to min=0; numbers allow negative values Wire size impact: +140 bytes (Brotli) Signed-off-by: JD Lien <jd@jdlien.com>
Signed-off-by: JD Lien <jd@jdlien.com>
Simplify the Validator by removing automatic DOM change detection. Users now call validator.init() after dynamic DOM updates and validator.destroy() before removing forms from the DOM. - Remove formMutationObserver and autoDestroyObserver - Remove debounce utility (no longer needed) - Remove unused ERROR_TIME_RANGE message - Delete Validator.autoDestroy.test.ts - Update CHANGELOG with breaking changes and bundle size reduction Signed-off-by: JD Lien <jd@jdlien.com>
Merge duplicate changelog sections into single unreleased v2.0.0 entry. Update bundle size comparison against v1.5.0 with accurate measurements. Signed-off-by: JD Lien <jd@jdlien.com>
Bug fixes: - Color sync null reference when no paired text input exists - Custom messages now apply to type validators (use errorKey lookup) - Error classes removed even when no error element exists - Stale inputErrors cleared on re-init for removed inputs - Pattern validation handles invalid regex gracefully - Pattern validation anchored for full-match (HTML5 behavior) Improvements: - Use CSS.escape for ID escaping (with polyfill for jsdom) - Streamline classList operations with spread syntax Tests: - Add tests confirming all 6 bug fixes - Add CSS.escape polyfill coverage test - Maintain 100% code coverage Signed-off-by: JD Lien <jd@jdlien.com>
Signed-off-by: JD Lien <jd@jdlien.com>
Signed-off-by: JD Lien <jd@jdlien.com>
- Add proper package.json exports for ESM/CJS consumers - Add unpkg/jsdelivr CDN entry points - Add UMD build for script tag usage - Export types and ValidationEvent from index.ts - Remove types.d.ts reference from tsconfig Signed-off-by: JD Lien <jd@jdlien.com>
- New validateOnBlur option (default: false) validates fields on blur - Catches touched-but-empty required fields before form submission - 10 new tests with 100% coverage maintained - Update docs: CHANGELOG, README, v2-analysis.md - Add .pnpm-store to .gitignore Signed-off-by: JD Lien <jd@jdlien.com>
Signed-off-by: JD Lien <jd@jdlien.com>
- GitHub Actions workflow for test and build on push/PR - ISC license file Signed-off-by: JD Lien <jd@jdlien.com>
Exposes a public method to validate individual inputs on demand, useful for multi-step forms, dependent field validation, and custom UI flows. Signed-off-by: JD Lien <jd@jdlien.com>
- Add validateFileInput method supporting data-max-files, data-max-file-size, data-min-file-size, and data-accept/accept attributes - Add error messages for file type, max files, max size, and min size - Fix required validation to properly handle file inputs - Add comprehensive test suite for file validation (21 tests) - Add file drop demo component and file validation examples - Remove obsolete v2-analysis.md Signed-off-by: JD Lien <jd@jdlien.com>
- Add parseBytes() to parse strings like "5MB", "1KB", "2GB", "500000" - Update formatBytes() to use decimal (SI) units by default for friendlier output - Support optional binary mode (base-1024) via formatBytes(n, false) - Add 13 new tests for parseBytes and updated formatBytes behavior - Minor demo label capitalization fixes Signed-off-by: JD Lien <jd@jdlien.com>
The form-field component was only passing through data-* attributes that were already prefixed, but max-files, min-file-size, max-file-size need to be mapped to data-max-files, etc. before passing to file-drop. Signed-off-by: JD Lien <jd@jdlien.com>
… sizes - Add binary unit support (KiB, MiB, GiB, TiB) to parseBytes - Hoist multiplier maps to static class properties for efficiency - Fail validation when size attributes are invalid (fail-closed) - Fix boundary rounding (999999 bytes now formats as "1 MB" not "1000 KB") Signed-off-by: JD Lien <jd@jdlien.com>
- Simplify CSS.supports mock comments - Add more named colors to mock for comprehensive testing - Update pnpm-lock.yaml Signed-off-by: JD Lien <jd@jdlien.com>
- Add GitHub username validation (async API check) - Add credit card Luhn checksum validation - Add sidebar nav with scroll-target-group for auto scroll-spy - Add section IDs for navigation anchors Signed-off-by: JD Lien <jd@jdlien.com>
Validator Registry: - Add three-tier validator lookup: instance → static → window - Add validators option to constructor for instance-scoped validators - Add static methods: registerValidator, unregisterValidator, getValidators, clearValidators - Export new types: ValidatorFunction, ValidationResult, ValidatorRegistry - Maintain backward compatibility with window object validators Demo: - Add form-card custom element for card sections with optional title/lead - Refactor demo to use form-card component - Update demo validators to use instance registry - Add render guards to prevent duplicate rendering when elements are moved Other: - Add prettier-plugin-tailwindcss for class sorting - Update README with validator registration documentation - Add CHANGELOG entry for v2.1.0 Signed-off-by: JD Lien <jd@jdlien.com>
Signed-off-by: JD Lien <jd@jdlien.com>
Signed-off-by: JD Lien <jd@jdlien.com>
Signed-off-by: JD Lien <jd@jdlien.com>
Signed-off-by: JD Lien <jd@jdlien.com>
Signed-off-by: JD Lien <jd@jdlien.com>
Signed-off-by: JD Lien <jd@jdlien.com>
Add static methods for validating inputs outside of forms: - Validator.validateSingle(input, options?) - validates any input - Validator.clearInputErrors(input, options?) - clears errors from any input Instance methods now enforce form membership: - validateSingle() only validates inputs in its form - clearInputErrors() and clearAllErrors() made public Demo updated to use Validator.validateSingle() for standalone field. Updated CHANGELOG and README with documentation. Signed-off-by: JD Lien <jd@jdlien.com>
When the instance method validateSingle() is called on an input that doesn't belong to the form, it now logs a warning suggesting to use the static Validator.validateSingle() method instead. Signed-off-by: JD Lien <jd@jdlien.com>
Signed-off-by: JD Lien <jd@jdlien.com>
The inputHandlers map only had a 'number' entry, so 'float' and 'decimal' types weren't getting type validation (isNumber check). They got input filtering and arrow keys, but invalid values like 'abc' would pass validation. Added float/decimal as aliases pointing to the same handler. Added tests to prevent regression. Signed-off-by: JD Lien <jd@jdlien.com>
Signed-off-by: JD Lien <jd@jdlien.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Major release with new features, bug fixes, and breaking changes.
Highlights
Breaking Changes
init()/destroy()lifecycle management requiredValidationEventreplaces separate success/error event classesmessagesoption typed asRecord<string, string>types.d.tsremoved (import from main package)Bug Fixes
See CHANGELOG.md for full details.