{"_id":"@aarongustafson/form-matching-fields","_rev":"2-ce34bd5f853473ea228f7ca429bc7741","name":"@aarongustafson/form-matching-fields","dist-tags":{"latest":"1.0.0"},"versions":{"0.0.1":{"name":"@aarongustafson/form-matching-fields","version":"0.0.1","keywords":["html","custom element","web component"],"author":{"url":"https://www.aaron-gustafson.com/","name":"Aaron Gustafson","email":"aaron@easy-designs.net"},"license":"MIT","_id":"@aarongustafson/form-matching-fields@0.0.1","maintainers":[{"name":"aarongustafson","email":"aaron@easy-designs.net"}],"homepage":"https://github.com/aarongustafson/form-matching-fields#readme","bugs":{"url":"https://github.com/aarongustafson/form-matching-fields/issues"},"dist":{"shasum":"7a6d99dc9a44839d075ed319e963c57c1b9287d9","tarball":"https://registry.npmjs.org/@aarongustafson/form-matching-fields/-/form-matching-fields-0.0.1.tgz","fileCount":8,"integrity":"sha512-+MJtoG0boW8Ohm1gQi4bbRtCysgLRt3Snm1juLkukgiwL4cPZeM8XWWSZ2BR1RPRA2LNXrnv2muJ/oNI9TTHqA==","signatures":[{"sig":"MEYCIQDBpSUaQMZhPOV2b8XSdxM9MNFgGTmLVpSY0C9ZAjzW+gIhAOOcReieEGWtP0h61gQPHWy7soxpRAupP0aoPeI/wja/","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":21361},"main":"index.js","type":"module","types":"form-matching-fields.d.ts","module":"form-matching-fields.js","engines":{"node":">=22.0.0"},"exports":{".":{"import":"./index.js"},"./define.js":{"import":"./define.js"},"./custom-elements.json":"./custom-elements.json","./form-matching-fields.js":{"types":"./form-matching-fields.d.ts","import":"./form-matching-fields.js"}},"gitHead":"9de4c21164ec7909ccdeb7bef647fd7a5172b685","scripts":{"lint":"npm run lint:eslint && npm run lint:prettier","test":"vitest","setup":"node scripts/setup.js","format":"npm run format:eslint && npm run format:prettier","test:ui":"vitest --ui","version":"node scripts/update-demo-versions.js && git add demo/esm.html","test:run":"vitest run","lint:eslint":"eslint .","postversion":"git push --follow-tags","format:eslint":"eslint . --fix","lint:prettier":"prettier \"**/*.js\" --check --ignore-path .gitignore","test:coverage":"vitest run --coverage","format:prettier":"prettier \"**/*.js\" --write --ignore-path .gitignore"},"_npmUser":{"name":"aarongustafson","email":"aaron@easy-designs.net"},"repository":{"url":"git+https://github.com/aarongustafson/form-matching-fields.git","type":"git"},"_npmVersion":"11.6.2","description":"Web component that automatically adds validation rules that ensure the values of descendent fields match.","directories":{},"_nodeVersion":"24.11.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"customElements":"custom-elements.json","devDependencies":{"eslint":"^9.39.4","vitest":"^4.1.7","prettier":"^3.8.3","happy-dom":"^20.9.0","@vitest/ui":"^4.1.7","@vitest/coverage-v8":"^4.1.7","@testing-library/dom":"^10.4.1","@open-wc/eslint-config":"^13.0.0","eslint-config-prettier":"^10.1.8","@testing-library/user-event":"^14.6.1"},"_npmOperationalInternal":{"tmp":"tmp/form-matching-fields_0.0.1_1779732367912_0.07387108981562451","host":"s3://npm-registry-packages-npm-production"}},"1.0.0":{"name":"@aarongustafson/form-matching-fields","version":"1.0.0","description":"Web component that automatically adds validation rules that ensure the values of descendent fields match.","keywords":["html","custom element","web component"],"author":{"name":"Aaron Gustafson","email":"aaron@easy-designs.net","url":"https://www.aaron-gustafson.com/"},"license":"MIT","homepage":"https://github.com/aarongustafson/form-matching-fields#readme","repository":{"type":"git","url":"git+https://github.com/aarongustafson/form-matching-fields.git"},"bugs":{"url":"https://github.com/aarongustafson/form-matching-fields/issues"},"type":"module","main":"index.js","module":"form-matching-fields.js","customElements":"custom-elements.json","types":"form-matching-fields.d.ts","exports":{".":{"import":"./index.js"},"./form-matching-fields.js":{"types":"./form-matching-fields.d.ts","import":"./form-matching-fields.js"},"./define.js":{"import":"./define.js"},"./custom-elements.json":"./custom-elements.json"},"engines":{"node":">=22.0.0"},"scripts":{"setup":"node scripts/setup.js","test":"vitest","test:ui":"vitest --ui","test:run":"vitest run","test:coverage":"vitest run --coverage","lint":"npm run lint:eslint && npm run lint:prettier","format":"npm run format:eslint && npm run format:prettier","lint:eslint":"eslint .","format:eslint":"eslint . --fix","lint:prettier":"prettier \"**/*.js\" --check --ignore-path .gitignore","format:prettier":"prettier \"**/*.js\" --write --ignore-path .gitignore","version":"node scripts/update-demo-versions.js && git add demo/esm.html","postversion":"git push --follow-tags"},"devDependencies":{"@open-wc/eslint-config":"^13.0.0","@testing-library/dom":"^10.4.1","@testing-library/user-event":"^14.6.1","@vitest/coverage-v8":"^4.1.7","@vitest/ui":"^4.1.7","eslint":"^9.39.4","eslint-config-prettier":"^10.1.8","happy-dom":"^20.9.0","prettier":"^3.8.3","vitest":"^4.1.7"},"publishConfig":{"access":"public"},"gitHead":"29912bed653802d8b172baf06955a8976c8fea87","_id":"@aarongustafson/form-matching-fields@1.0.0","_nodeVersion":"24.15.0","_npmVersion":"11.12.1","dist":{"integrity":"sha512-QsacZYe9w9AXpcLChnLEsyVg4ODJfFGANQrHGKHdK7YZcxTPNvzxf3izbFgYn2ZpQg5o6xZBrxr74pVx3vg2Sw==","shasum":"12560e572204dd1c6a50f9d962a097d8420c752a","tarball":"https://registry.npmjs.org/@aarongustafson/form-matching-fields/-/form-matching-fields-1.0.0.tgz","fileCount":8,"unpackedSize":21361,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@aarongustafson%2fform-matching-fields@1.0.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCICJzBOa12deTWwtzcB1F2i8Uj8rHFteuhin57gX0Kmp/AiEA5s0MOoiUrHm3UIEJecrj1dddyYH2pvDqJy3cmUzskCw="}]},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:1ecbbe80-b9dd-4bdc-9867-ad79c8fb5278"}},"directories":{},"maintainers":[{"name":"aarongustafson","email":"aaron@easy-designs.net"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/form-matching-fields_1.0.0_1779740278050_0.657355826555412"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-25T18:06:07.714Z","modified":"2026-05-25T20:17:58.817Z","0.0.1":"2026-05-25T18:06:08.068Z","1.0.0":"2026-05-25T20:17:58.201Z"},"bugs":{"url":"https://github.com/aarongustafson/form-matching-fields/issues"},"author":{"name":"Aaron Gustafson","email":"aaron@easy-designs.net","url":"https://www.aaron-gustafson.com/"},"license":"MIT","homepage":"https://github.com/aarongustafson/form-matching-fields#readme","keywords":["html","custom element","web component"],"repository":{"type":"git","url":"git+https://github.com/aarongustafson/form-matching-fields.git"},"description":"Web component that automatically adds validation rules that ensure the values of descendent fields match.","maintainers":[{"name":"aarongustafson","email":"aaron@easy-designs.net"}],"readme":"# form-matching-fields Web Component\n\n[![npm version](https://img.shields.io/npm/v/@aarongustafson/form-matching-fields.svg)](https://www.npmjs.com/package/@aarongustafson/form-matching-fields) [![Build Status](https://img.shields.io/github/actions/workflow/status/aarongustafson/form-matching-fields/ci.yml?branch=main)](https://github.com/aarongustafson/form-matching-fields/actions)\n\nWeb component wrapper that adds additive validation to ensure two text-type fields match.\n\n## Demo\n\n[Live Demo](https://aarongustafson.github.io/form-matching-fields/demo/) ([Source](./demo/index.html))\n\nAdditional demos:\n\n- [ESM CDN Demo](https://aarongustafson.github.io/form-matching-fields/demo/esm.html) ([Source](./demo/esm.html))\n- [Unpkg CDN Demo](https://aarongustafson.github.io/form-matching-fields/demo/unpkg.html) ([Source](./demo/unpkg.html))\n\n## Installation\n\n```bash\nnpm install @aarongustafson/form-matching-fields\n```\n\n## Usage\n\n### Option 1: Auto-define the custom element (easiest)\n\nImport the package to automatically define the `<form-matching-fields>` custom element:\n\n```javascript\nimport '@aarongustafson/form-matching-fields';\n```\n\nOr use the define-only script in HTML:\n\n```html\n<script\n  src=\"./node_modules/@aarongustafson/form-matching-fields/define.js\"\n  type=\"module\"\n></script>\n```\n\n### Option 2: Import the class and define manually\n\nImport the class and define the custom element with your preferred tag name:\n\n```javascript\nimport { FormMatchingFieldsElement } from '@aarongustafson/form-matching-fields/form-matching-fields.js';\n\ncustomElements.define('my-custom-name', FormMatchingFieldsElement);\n```\n\n### Basic Example\n\n```html\n<form-matching-fields>\n  <label for=\"password\">Password</label>\n  <input id=\"password\" type=\"password\" required />\n\n  <label for=\"password-again\">Password again</label>\n  <input id=\"password-again\" type=\"password\" required />\n</form-matching-fields>\n```\n\n### How Matching Works\n\nThis component intentionally keeps matching behavior simple:\n\n- It only looks at descendant input controls.\n- It only considers text-type inputs: text, email, password, search, tel, and url.\n- It ignores disabled and readonly fields.\n- It always compares the first two eligible fields.\n- It only applies mismatch validation when both fields are non-empty.\n- It pins mismatch validation to the second field.\n\n### Validation Stacking Behavior\n\nThe component does not replace native or existing custom validation:\n\n- If the second field already has native validation issues (such as required or type mismatch), the component does not apply a mismatch message.\n- If the second field already has a custom validity message, the component does not replace it.\n- The component only clears a mismatch message that it previously set itself.\n\n## Attributes\n\n| Attribute            | Type     | Default                                               | Description                                                                                         |\n| -------------------- | -------- | ----------------------------------------------------- | --------------------------------------------------------------------------------------------------- |\n| `validation-message` | `string` | `The fields “{label_1}” and “{label_2}” should match` | Custom mismatch message template. Supports placeholder replacement for `{label_1}` and `{label_2}`. |\n\n## Properties\n\n| Property            | Type     | Description                                  |\n| ------------------- | -------- | -------------------------------------------- |\n| `validationMessage` | `string` | Property equivalent of `validation-message`. |\n\n## Message Label Resolution\n\nWhen replacing `{label_1}` and `{label_2}`, labels are resolved in this order:\n\n1. Associated `<label for>` text\n2. Wrapping `<label>` text\n3. `aria-label`\n4. `name`\n5. `id`\n\n## Examples\n\n### Email Verification\n\n```html\n<form-matching-fields>\n  <label for=\"email\">Email</label>\n  <input id=\"email\" type=\"email\" required />\n\n  <label for=\"verify-email\">Verify email</label>\n  <input id=\"verify-email\" type=\"email\" required />\n</form-matching-fields>\n```\n\n### Custom Validation Message\n\n```html\n<form-matching-fields\n  validation-message=\"Please make sure {label_2} matches {label_1}.\"\n>\n  <label for=\"email\">Email</label>\n  <input id=\"email\" type=\"email\" required />\n\n  <label for=\"verify-email\">Verify email</label>\n  <input id=\"verify-email\" type=\"email\" required />\n</form-matching-fields>\n```\n\n### Localized (Hindi) Message\n\n```html\n<form-matching-fields\n  validation-message=\"{label_1} और {label_2} का मान समान होना चाहिए।\"\n>\n  <label for=\"password-hi\">पासवर्ड</label>\n  <input id=\"password-hi\" type=\"password\" required />\n\n  <label for=\"password-hi-again\">पासवर्ड फिर से</label>\n  <input id=\"password-hi-again\" type=\"password\" required />\n</form-matching-fields>\n```\n\n## Browser Support\n\nThis component uses modern web standards:\n\n- Custom Elements v1\n- Shadow DOM v1\n- ES Modules\n\nFor older browsers, you may need polyfills.\n\n## Development\n\n```bash\n# Install dependencies\nnpm install\n\n# Run tests\nnpm test\n\n# Run tests with coverage\nnpm run test:coverage\n\n# Lint code\nnpm run lint\n\n# Format code\nnpm run format\n\n# View demo\nopen demo/index.html\n```\n\n## License\n\nMIT © [Aaron Gustafson](https://www.aaron-gustafson.com/)\n","readmeFilename":"README.md"}