Client-side Validation

Each element which can return a value can hold a validator property.

The basic validator is defined as following:

{
    "min_length": ?number,
    "max_length": ?number,
    "required": ?boolean,
    "min_value": ?number,
    "max_value": ?number,
    "numeric": ?boolean,
    "letters": ?{
        "uppercase": boolean,
        "lowercase": boolean
    },
    "symbols": ?boolean,
    "char_whitelist": ?array<char>,
    "char_blacklist": ?array<char>,
    "pattern": ?string,
    "pattern_format": ?string
}

Applicable Elements

Not every Rule is useful for every element. Therefore the usage of the rules are restricted.

All of the elements that can hold a value are listed in the table below. Elements that are not in the list do not have a validator-field.

A declares that the rule is applicable for the element, a - declares the opposite.

Rule / Element Input Toggle Choice Switchable Padlock
min_length - - - -
max_length - - - -
required -
min_value - - -
max_value - - -
numeric - - - -
letters.uppercase - - - -
letters.lowercase - - - -
symbols - - - -
char_whitelist - - - -
char_blacklist - - - -
pattern - - - -
allow_selected.min - - - -
allow_selected.max - - - -

The min_length Validation

Specifies the minimum number of characters allowed.

The max_length Validation

Specifies the maximum number of characters allowed.

The required Validation

Specifies that the value of the field cannot be null, empty (for string & array) or false (for boolean).

The min_value Validation

Specifies the minimum value for numeric values.

The max_value Validation

Specifies the maximum value for numeric vaules.

The numeric Validation

Specifies if numbers ([0-9]) are allowed symbols.

This validation is set to true by default.

The letters Validation

Specifies if (upper- and/or lowercase) letters are allowed.

(default: { uppercase: true, lowercase: true })

The symbols Validation

Specifies if characters that are not numbers ([0-9]) or letters are allowed.

This validation is set to true by default.

The char_whitelist Validation

Specifies an array of additionally allowed characters.

Characters in this array can override the letters, symbols & numeric validator restrictions, e.g. if letters is set to {uppercase: false, lowercase: false} and char_whitelist is ['A'], A is still a valid character.

The char_blacklist Validation

Specifies an array of additionally disallowed characters. Characters in this array can override the letters, symbols & numeric validator restrictions, e.g. if letters is set to {uppercase: true, lowercase: false}and char_blacklist is ['A'], 'A' is not a valid character.

The pattern Validation

Specifies a RegEx pattern which the value must match.

The pattern_format Validation

A human readable pattern-format, which can be shown to the consumer if the input is invalid because of the pattern-attribute.

The allow_selected.min & allow_selected.max Validation

Belongs to the Choice element and is explained in the according section.

Conflicting Rules

It's possible to have conflicting validation rules. For example an Input element may not allow letters ({ uppercase: false, lowercase: false }) and at the same time allow a single or multiple letters (char_whitelist: ["a", "B"]). Therefore it's important to know, how and in which order the validation rules apply.

The most important rule is char_blacklist. Characters that are listed in char_blacklist may not be used, regardless what other rules suggest.

Characters in char_whitelist may be used for numeric, letters or symbols, even if they are not specifically allowed in those rules. Only exception is if they are listed in char_blacklist.

Every validation rule that is set must be validated and be valid.

Examples

Description Example
Account numbers.

Valid examples:
123456
12345678

Invalid examples:
123 (min_length)
123 456 78 (symbols)
12-34-56-78-00 (symbols, max_length)

Account numbers are often used in the authentication process.
{
    "min_length": 4,
    "max_length": 12,
    "required": true,
    "numeric": true,
    "symbols": false,
    "letters": {
        "uppercase": false,
        "lowercase": false
    },
}
Login via email address.

Valid examples:
test@klarna.com
test3account@klarna.com
test.account+bank@klarna.com

Invalid examples:
test@klarnacom (pattern)
test@email@klarna.com (pattern)
@klarna.com (pattern)
TEST@klarna.com (letters.uppercase)

Some bank accounts require a login via email address. In this example, all symbols are allowed, except "/", "\", "#", or "*".
{
    "required": true,
    "numeric": true,
    "symbols": true,
    "letters": {
        "uppercase": false,
        "lowercase": true
    },
    "char_blacklist": ["/", "\", "#", "*"]
    "pattern": "^[^@]+@[^@\.]+\.[^@]+$",
    "pattern_format": "email@adress.com"
}
National identification number in Sweden.

Valid examples:
8112289874
811228-9874
811228+9874
19811228-9874

In this example, we allow all numbers and additionally the hyphen and plus symbol. Other symbols are not allowed. Since the first two numbers and the symbol is optional, we define a length of 10-13 to be valid.
{
    "min_length": 10,
    "max_length": 13,
    "required": true,
    "numeric": true,
    "symbols": false,
    "letters": {
        "uppercase": false,
        "lowercase": false
    },
    "char_whitelist": ["-", "+"]
}
German IBAN validation.

Valid examples:
DE89 3704 0044 0532 0130 00
DE89370400440532013000

Invalid examples:
370400440532013000 (min_length)
AT3704004405320130000000 (letters.uppercase)
89370400440532013000DD (pattern)

Allowing spaces and a length between 22 and 27 chars. Numbers are allowed, letters are not allowed, except "D" and "E". With the pattern we additionally force a specific order.
{
    "min_length": 22,
    "max_length": 27,
    "required": true,
    "numeric": true,
    "symbols": false,
    "letters": {
        "uppercase": false,
        "lowercase": false
    },
    "char_whitelist": [" ", "D", "E"],
    "pattern": "^DE[0-9\s]{20,25}$",
    "pattern_format": "DE00000000000000000000",
}
British sort codes.

Valid examples:
123456
12-34-56

Invalid examples:
12/34/56 (symbols, pattern)
{
    "min_length": 6,
    "max_length": 8,
    "required": true,
    "numeric": true,
    "symbols": false,
    "letters": {
        "uppercase": false,
        "lowercase": false
    },
    "char_whitelist": ["-"],
    "pattern": "^\d{2}-?\d{2}-?\d{2}$",
    "pattern_format": "12-34-56"
}
Value range.

Valid examples:
50

Invalid examples:
100 (max_value)

The value must be between 18 and 99.
{
    "min_value": 18,
    "max_value": 99,
    "numeric": true,
    "symbols": false,
    "letters": {
        "uppercase": false,
        "lowercase": false
    },
}

results matching ""

    No results matching ""