90e6b4ef36
- @lion/ajax@0.1.19 - @lion/button@0.3.35 - @lion/calendar@0.3.0 - @lion/checkbox-group@0.2.0 - @lion/checkbox@0.2.0 - @lion/choice-input@0.3.0 - @lion/core@0.3.0 - @lion/field@0.4.0 - @lion/fieldset@0.2.0 - @lion/form-system@0.1.0 - @lion/form@0.2.0 - @lion/icon@0.2.9 - @lion/input-amount@0.2.0 - @lion/input-date@0.2.0 - @lion/input-datepicker@0.3.0 - @lion/input-email@0.2.0 - @lion/input-iban@0.2.0 - @lion/input@0.2.0 - @lion/localize@0.5.0 - @lion/option@0.2.10 - @lion/overlays@0.6.3 - @lion/popup@0.3.12 - @lion/radio-group@0.2.0 - @lion/radio@0.2.0 - @lion/select-rich@0.4.0 - @lion/select@0.2.0 - @lion/steps@0.2.0 - @lion/switch@0.2.0 - @lion/tabs@0.1.1 - @lion/textarea@0.2.0 - @lion/tooltip@0.3.12 - @lion/validate@0.3.0 |
||
|---|---|---|
| .. | ||
| docs | ||
| src | ||
| test | ||
| test-helpers | ||
| translations | ||
| CHANGELOG.md | ||
| index.js | ||
| package.json | ||
| README.md | ||
| test-helpers.js | ||
Validate
Features
- allow for advanced UX scenarios by updating validation state on every value change
- provide a powerful way of writing validation via pure functions
- multiple validation types(error, warning, info, success)
- default validators
- custom validators
Validation is applied by default to all form controls via the ValidateMixin.
For a detailed description of the validation system and the ValidateMixin, please see
ValidationSystem.
How to use
Installation
npm i --save @lion/validate
import '@lion/input/lion-input.js';
import { %validatorName% } from '@lion/validate';
Note that we import an lion-input here as an example of a form control implementing ValidateMixin. We could equally well use lion-textarea, lion-select, lion-fieldset etc. to illustrate our example.
Example
All validators are provided as pure functions. They should be applied to the formcontrol (implementing
ValidateMixin) as follows:
import '@lion/input/lion-input.js';
import { isString, maxLengthValidator, defaultOkValidator } from '@lion/validate';
const isInitialsRegex = /^([A-Z]\.)+$/;
export const isExampleInitials = value =>
isString(value) && isInitialsRegex.test(value.toUpperCase());
export const isExampleInitialsValidator = () => [
(...params) => ({ isExampleInitials: isExampleInitials(...params) }),
];
<lion-input
label="Initials"
name="initials"
.errorValidators="${[['required], maxLengthValidator(10)]}"
.warningValidators="${[isExampleInitialsValidator()]}"
.successValidators="${[defaultOkValidator()]}"
></lion-input>
In the example above we use different types of validators.
A validator applied to .errorValidators expects an array with a function, a parameters object and
optionally an additional configuration object.
minMaxLengthValidator({ min: 5, max: 10 });
The custom isExampleInitialsValidator checks if the value is fitting our regex, but does not
prevent the user from submitting other values.
Retrieving validity states is as easy as checking for:
myInitialsInput.errorState === false;