1.4.8 • Published 3 months ago
@voscausa/svelte-use-validate v1.4.8
svelte-use-validate
Features
- html inputs and svelte component validation
- keystroke reactive and optional reactive updates
- validation rules and rule chaining
- lazy validation (on first use) and OK (validate all)
- tooltip like messages and invalid field border markers
- dynamic rulechains (update rules and optional rules)
- add custom validators and cross field validators
- validator controls to control validator behaviour
Installation
npm install -D @voscausa/svelte-use-validate
Config example
// rulesConfig = { node.id: rule or [rulechain ...], ...}
const rulesConfig = {
day: ["required", { range: { min: 1, max: 31 } }, "dayOk"],
month: ["required", { range: { min: 1, max: 12 } }],
grossValue: ["required", "cents"],
section: ["required", "sectionContra"], // optional contra
contra: "get", // get default: "" if section has no contra
note: "get",
account_number: ["required", "ibanNum"], // alt rule with ibanRuleChains(iban)
iban: "ibanType", // alt rule with ibanRuleChains(iban)
title: ["required", { len: { operator: ">=", len: 10, msg: "length must be >= 10" } }],
};
Initialize validation instance
import { validate } from "@voscausa/svelte-use-validate";
// not valid markers for components
const notValidMarkers = { contra: false, section: false, grossValue: false };
const { field, OK, addValidator, fieldValues, runRuleChain } = validate(
{ rulesConfig, lazy: true, markDefault: 3 , alertBelow: 0, setNotValid},
(id, notValid, value) => {
// callback to update bindings or signal notValid components
if (id in notValidMarkers) notValidMarkers[id] = notValid;
}
);
Validate instance config options:
- rulesConfig : rulesConfig object
- lazy : validate on first use (default:
true
) - OK() : check all rules (check all before submit)
- addValidator : add a custom validator
- markDefault : mark invalid inputs:
- 1 : input border only
- 2 : message below the input only
- 3 : both border and message
- 0 : do not mark invalid inputs
- alertBelow : position (in pics) of the alert msg below the input (default:
0
) - setNotValid : optional custom validator helper function to mark invalid fields
Validator funtions
Validator functions have two types of arguments:
- configured rule arguments like min, max, len, msg and so on
- the field context (this)
- id: field id, default:
node.name
(a unique id for an html element) - node: the html element
- value: the field value
- controls: array of values to (cross) control the behaviour of the validator
- mark: field has to be marked with border and or text (default:
3
)
- id: field id, default:
A validator returns notValid (true or false). True breaks the rule chain.
Svelte use action field function arguments and defaults
use:field={value} or use:field={obj}
// where the value / obj argument will be decomposed as show below:
let { value, id = node.name, mark = 3, controls = [] } = obj;
Dynamic rule chaines and cross field validation
// alt rulechain selection to validate an account_number
addValidator("ibanType", function () {
runRuleChain.account_number(
// here we use the iban bool as a control
this.value
? ["required", "ibanNum"]
: ["required", { len: { operator: ">=", len: 3, msg: "not IBAN; length must be > 3" } }]
);
// this iban validator is always OK, return false (bool always OK)
return false;
});
// alt rulechain selection to validate an optional contra
addValidator("sectionContra", function () {
runRuleChain.contra(
// hasContra control => require a contra account input
this.controls[0]
? ["required", { func: { fn: validContraSection, msg: "contra section missing" } }]
: "get" // no contra account => contra account = ""
);
// this section validator is always OK, so return false
return false;
});
Examples
An example Svelte SPA can be found here: voscausa/use-validate-example
1.4.8
3 months ago
1.4.4
6 months ago
1.4.3
7 months ago
1.4.2
7 months ago
1.4.1
7 months ago
1.4.0
1 year ago
1.3.4
2 years ago
1.3.3
2 years ago
1.3.2
2 years ago
1.3.1
2 years ago
1.3.0
2 years ago
1.2.2
2 years ago
1.2.1
2 years ago
1.2.0
2 years ago
1.1.9
2 years ago
1.1.8
2 years ago
1.1.7
2 years ago
1.1.6
2 years ago
1.1.5
2 years ago
1.1.4
2 years ago
1.1.3
2 years ago
1.1.2
2 years ago
1.1.1
2 years ago
1.1.0
2 years ago
1.0.9
2 years ago
1.0.8
2 years ago
1.0.7
2 years ago
1.0.6
2 years ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago