Powerful & Lightweight form control library with data attributes and safe expression evaluation.
npm install formfxdata-fx-* attributes.
eval() or new Function(). Expressions are evaluated safely.
bash
npm install formfx
`
Or via CDN:
`html
`
Quick Start (Attributes)
Just define rules in your HTML using data attributes.
`html
`
JSON Rules (Advanced)
For more complex logic or when you want to keep HTML clean. JSON rules take precedence over attributes.
`javascript
const fx = new FormFx(form, {
rules: [
{
if: "total > 1000",
then: [
{ show: "#discount-section" },
{ required: "#coupon-code" }
]
}
]
});
`
Repeater
Handle dynamic rows with ease.
`html
`
$3
Refer to fields within the same repeater row.
`html
Expensive item!
`
Persistence
Automatically save and restore form rules state.
`javascript
const fx = new FormFx(form, {
persist: {
key: 'my-form-settings',
storage: 'localStorage'
}
});
`
Rule Editor (Optional Add-on)
A visual editor for your form rules.
`javascript
import { FormFx } from 'formfx';
// Import editor separately to keep main bundle small
import { RuleEditor } from 'formfx/editor';
import 'formfx/editor.css';
const fx = new FormFx(form);
fx.mount();
const editor = new RuleEditor(fx, {
mount: document.getElementById('editor-container'),
mode: 'json'
});
editor.mount();
`
Debug Panel
Visual debug information for development.
`javascript
const fx = new FormFx(form, { debug: true });
`
API Reference
$3
- disableOnHide: Boolean (default true)
- clearOnHide: Boolean (default false)
- rules: JSONRule[]
- persist: PersistOptions
- debug: Boolean
$3
- mount(): Initialize listeners and observers.
- destroy(): Cleanup everything (removes listeners and observers).
- pause() / resume(): Pause or resume rule evaluation.
- reEvaluate(): Manually trigger evaluation.
- exportRules(): Get current JSON rules.
- importRules(rules): Load new JSON rules.
- enableRule(ruleId) / disableRule(ruleId): Control JSON rules by ID.
Compatibility
- Modern browsers (Chrome, Firefox, Safari, Edge)
- No eval() used. Safe for strict CSP environments.
Security
- Custom tokenizer and parser ensure expressions are only allowed to perform specific safe operations.
- No access to global objects like window or document` from within expressions.