Validate

🛠 Status: Pilot Phase

Lion Web Components are still in an early alpha stage; they should not be considered production ready yet.

The goal of our pilot phase is to gather feedback from a private group of users. Therefore, during this phase, we kindly ask you to:

• not publicly promote or link us yet: (no tweets, blog posts or other forms of communication about Lion Web Components)
• not publicly promote or link products derived from/based on Lion Web Components

As soon as Pilot Phase ends we will let you know (feel free to subscribe to this issue https://github.com/ing-bank/lion/issues/1)

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;