ec8da8f12c
Co-authored-by: Mikhail Bashkirov <mikhail.bashkirov@ing.com> Co-authored-by: Thijs Louisse <thijs.louisse@ing.com> Co-authored-by: Joren Broekema <joren.broekema@ing.com> Co-authored-by: Gerjan van Geest <gerjan.van.geest@ing.com> Co-authored-by: Erik Kroes <erik.kroes@ing.com> Co-authored-by: Lars den Bakker <lars.den.bakker@ing.com>
76 lines
2.3 KiB
Markdown
76 lines
2.3 KiB
Markdown
# Validate
|
|
|
|
[//]: # (AUTO INSERT HEADER PREPUBLISH)
|
|
|
|
## 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](./docs/DefaultValidators.md)
|
|
- [custom validators](./docs/tutorials/CustomValidatorsTutorial.md)
|
|
|
|
Validation is applied by default to all [form controls](../field/docs/FormFundaments.md) via the
|
|
ValidateMixin.
|
|
|
|
For a detailed description of the validation system and the `ValidateMixin`, please see
|
|
[ValidationSystem](./docs/ValidationSystem.md).
|
|
|
|
## How to use
|
|
|
|
### Installation
|
|
|
|
```sh
|
|
npm i --save @lion/validate
|
|
```
|
|
|
|
```js
|
|
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:
|
|
|
|
```js
|
|
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) }),
|
|
];
|
|
```
|
|
|
|
```html
|
|
<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.
|
|
|
|
```js
|
|
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:
|
|
|
|
```js
|
|
myInitialsInput.errorState === false;
|
|
```
|