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 a label.

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 a label.

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 a prefill_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 card mask.

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

{
    "min_length": 4,
    "max_length": 12,
    "required": true,
    "numeric": true,
    "symbols": false,
    "letters": {
        "uppercase": false,
        "lowercase": false
    },
}

{
    "required": true,
    "numeric": true,
    "symbols": true,
    "letters": {
        "uppercase": false,
        "lowercase": true
    },
    "char_blacklist": ["/", "\", "#", "*"]
    "pattern": "^[^@]+@[^@\.]+\.[^@]+$",
    "pattern_format": "email@adress.com"
}

{
    "min_length": 10,
    "max_length": 13,
    "required": true,
    "numeric": true,
    "symbols": false,
    "letters": {
        "uppercase": false,
        "lowercase": false
    },
    "char_whitelist": ["-", "+"]
}

{
    "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",
}

{
    "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"
}

{
    "min_value": 18,
    "max_value": 99,
    "numeric": true,
    "symbols": false,
    "letters": {
        "uppercase": false,
        "lowercase": false
    },
}

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