The input
Element
The input
element can be seen as a representation of the HTML <input />
element. It is structured as follows:
{
"type": "input",
"tags": array<string>,
"version": string,
"key": string,
"password": boolean,
"label": ?string,
"placeholder": ?string,
"prefill_value": ?string,
"read_only": boolean,
"mask": ?array<string>,
"validator": Validator
}
The password
Property
since v1.0.0
The password
property contains a boolean that indicates if the input contains sensitive consumer data.
It is recommended to not show the clean input value. Instead show e.g. *
.
Example of a possible look of an input element with
password
:true
and alabel
.
The label
Property
since v1.0.0
The label
property represents a caption for the input
.
The placeholder
Property
since v1.0.0
The placeholder
property specifies a short hint that describes the expected value for the input
element.
The prefill_value
Property
since v1.0.0
The prefill_value
property sets a value to the input
element at initialization. If the consumer does not change the value of the input
the prefill_value
is submitted as the value.
Example of a possible look of an input element with
prefill_value
and alabel
.
The read_only
Property
since v1.0.0
If the value of the read_only
property is true the value of the input
can not be changed by the consumer.
Example of a possible look of a read-only input element with
label
and aprefill_value
.
The mask
Property
since v1.0.0
The optional mask
property enables us to set a specific mask for the input element. The syntax of mask
is similar to the text-mask syntax.
Example of a possible look of an input element with
label
and a credit cardmask
.
The validator
Property
The validator
property may contain several rules for the input
element to be validated against:
{
"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
}
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 cannot be null
or empty.
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.
The default value for this validation is true
.
The letters
Validation
Specifies if (upper- and/or lowercase) letters are allowed.
The default value for this validation is { uppercase: true, lowercase: true }
.
The symbols
Validation
Specifies if characters that are not numbers ([0-9]), letters or whitespace characters are allowed.
The default value for this validation is true
.
The char_whitelist
Validation
Specifies an array of allowed characters.
Characters in the char_whitelist
array override all but the pattern
validation rule.
The char_blacklist
Validation
Specifies an array of disallowed characters.
The pattern
Validation
Specifies a RegEx pattern which the value must match, regardless of the specifications made in other validation rules.
The pattern_format
Property
A human-readable pattern-format, which can be shown to the consumer if the input is invalid because of the pattern
-validation.
Conflicting Rules
Every validation rule that is set must be applied. That means that it is possible to have conflicting validation rules, hence it is important to know how and in which order the validation rules apply.
Regardless of all other rules - if set - the pattern
rule must always be adhered to, for example, if char_whitelist
is set to ["A", "B"]
and pattern
is set to C[0-9]+
, then the input B2345
is not valid, because it does not match the pattern.
Additionally, characters in the char_whitelist
array override all but the pattern
validation rule,
for example, if letters
is set to {uppercase: false, lowercase: false}
and char_whitelist
is ['A']
, then A
is still a valid character.
Validation 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. |
|
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 "*". |
|
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. |
|
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. |
|
British sort codes.
Valid examples: 123456 12-34-56 Invalid examples: 12/34/56 (symbols, pattern) |
|
Value range.
Valid examples: 50 Invalid examples: 100 (max_value) The value must be between 18 and 99. |
|
Example
{
"type": "input",
"key": "input1",
"version": "1.0.0",
"tags": [],
"password": false,
"label": "Label",
"placeholder": "",
"prefill_value": "prefilled",
"read_only": false,
"validator": {
...
}
}
Changelog
1.0.0 - 01.02.2019
- initial version