Skip to main content
Version: Upcoming 🦄

Form Field Validation

There are several ways to control the user's input, restrict the type of characters, the maximal length or match the input values to a certain pattern to ensure only valid and correct values are stored.

HTML5 Field Validation

​

HTML5 already provides client side input validation based on the input type, this function can be used by assigning the correct type to the form control TextField.

TextField

​

  • TextField with no validation:

    <input id="text1" data-hf-control="TextField" type="text" />

  • TextField with type number:

    <input id="number1" data-hf-control="TextField" type="number" />

  • TextField with type telephone:

    <input id="tel1" data-hf-control="TextField" type="tel" />

  • TextField with type e-mail:

    <input id="email1" data-hf-control="TextField" type="email" />

  • TextField with type date:

    <input id="date1" data-hf-control="TextField" type="date" />

  • TextField with type time:

    <input id="time1" data-hf-control="TextField" type="time" />

These validations are very limited and restricted to single line input elements and often do not meet the necessities of the desired input validation. Therefore we provide extended options for a better client-side input validation.

Extra Validation

​

Besides the already implemented data-hf-option "required: true", which checks if a field has been filled in, you can define more individual validation rules by adding the data-hf-option "validator" or by defining a custom validation function.

ComboBox​

The ComboBox only allows to select values from the configured data source. The option anytext: true allows to enter free text.

<div
    id="combobox1"
    data-hf-control="ComboBox"
    data-hf-options="{
        required: true,
        anytext: false,
        dataSource: [
            { name: 'Bauer, F', code: 'Bauer, F' },
            { name: 'Gruber, P', code: 'Gruber, P' },
            { name: 'Lanner, G', code: 'Lanner, G' },
            { name: 'Simon, R', code: '3521' },
            { name: 'Herbert, W', code: '123456789012' }
        ],
        dataTextField: 'name',
        dataValueField: 'code',
        validator: {
            errorText: 'Only inputs from the dropdown are allowed.'
        }
    }"
></div>

anytext​

Allows free text input. Default is true.
How to use:
anytext: true
Type: boolean

validator.custom​

Specifies a custom validate function as string. Read more
How to use:
custom: 'HFFormDefinition.Namespace.validate'
Type: function
Signature: (field: object, value: string) => boolean

validator.errorHTML​

Specifies the error message that is shown to the user. An object can be defined for different messages, depending on the error type. In this case, a default type must exist. Valid HTML is allowed.
How to use:
errorHTML: 'Only <strong>inputs from the dropdown</strong> are allowed.'
Type: string

validator.errorText​

Specifies the error message that is shown to the user. An object can be defined for different messages, depending on the error type. In this case, a default type must exist. If errorHTML is also present, errorText is not used.
How to use:
errorText: 'Only inputs from the dropdown are allowed.'
Type: string

validator.maxlength​

Specifies the maximum number of characters allowed. Default for control is 1000.
How to use:
maxlength: 10
Type: number

errorText / errorHTML interface

​

interface IErrorMessages {
    anytext?: string;
    maxlength?: string;
    [custom: string]: string;
    default: string;
}

DataControl​

<div
    id="test_data_control"
    data-hf-control="DataControl"
    data-hf-options="{
    validator: {
        jsonSchema: {
            type: 'array',
            items: {
                type: 'object',
                properties: {
                    test_data_control: {
                        type: 'string',
                        minLength: 1,
                        maxLength: 10
                    }
                }
            }
        }
    }
}"
></div>

validator.custom​

Specifies a custom validate function as string. Read more
How to use:
custom: 'HFFormDefinition.Namespace.validate'
Type: function
Signature: (field: object, value: string) => boolean

validator.jsonSchema​

Specify a JSON Schema to validate the given input. Read more
How to use:
jsonSchema: {}
Type: jsonschema

DatePicker​

<div
    id="birthday"
    data-hf-control="DatePicker"
    data-hf-options="{
    required: true,
    displayValueFormat: 'dd.MM.yyyy',
    max: 'now',
    min: '1965-05-14',
    parseFormats: [ 'dd.MM.yyyy', 'ddMMyyyy', 'dd/MM/yyyy', 'dd-MM-yyyy' ],
    validator: {
        errorText: 'Please enter a valid date.'
    }
}"
></div>

max​

The option "now" restricts the input of the newest possible entry to the current day. Format for fixed dates is dd.MM.yyyy
How to use:
max: 'now'
Type: string

min​

Set to allow entries from that date on. Format is dd.MM.yyyy and default value is 01.01.1900
How to use:
min: '1965-05-14'
Type: string

validator.custom​

Specifies a custom validate function as string. Read more
How to use:
custom: 'HFFormDefinition.Namespace.validate'
Type: function
Signature: (field: object, value: string) => boolean

validator.errorHTML​

Specifies the error message that is shown to the user. An object can be defined for different messages, depending on the error type. In this case, a default type must exist. Valid HTML is allowed.
How to use:
errorHTML: 'Please enter a <strong>valid date</strong>.'
Type: string

validator.errorText​

Specifies the error message that is shown to the user. An object can be defined for different messages, depending on the error type. In this case, a default type must exist. If errorHTML is also present, errorText is not used.
How to use:
errorText: 'Please enter a valid date.'
Type: string

errorText / errorHTML interface

​

interface IErrorMessages {
    max?: string;
    min?: string;
    [custom: string]: string;
    default: string;
}

The DropDownList only allows to select values from the configured data source.

<div
    id="dropdownlist1"
    data-hf-control="DropDownList"
    data-hf-options="{
        required: true,
        dataSource: [
            { name: 'Bauer, F', code: 'Bauer, F' },
            { name: 'Gruber, P', code: 'Gruber, P' },
            { name: 'Lanner, G', code: 'Lanner, G' },
            { name: 'Simon, R', code: '3521' },
            { name: 'Herbert, W', code: '123456789012' }
        ],
        dataTextField: 'name',
        dataValueField: 'code',
        validator: {
            errorText: 'Only inputs from the dropdown are allowed.'
        }
    }"
></div>
Specifies a custom validate function as string. Read more
How to use:
custom: 'HFFormDefinition.Namespace.validate'
Type: function
Signature: (field: object, value: string) => boolean
Specifies the error message that is shown to the user. An object can be defined for different messages, depending on the error type. In this case, a default type must exist. Valid HTML is allowed.
How to use:
errorHTML: 'Only <strong>inputs from the dropdown</strong> are allowed.'
Type: string
Specifies the error message that is shown to the user. An object can be defined for different messages, depending on the error type. In this case, a default type must exist. If errorHTML is also present, errorText is not used.
How to use:
errorText: 'Only inputs from the dropdown are allowed.'
Type: string
interface IErrorMessages {
    [custom: string]: string;
    default: string;
}

NumericField​

<div
    id="temperatur"
    data-hf-control="NumericField"
    data-hf-options="{
    step: 0.1,
    min: 20,
    max: 45,
    placeholder: '°C',
    decimals: 1,
    format: '0.0°',
    startValue: 36 
}"
></div>

max​

Specifies the maximum value for an input.
How to use:
max: 10
Type: number

min​

Specifies a minimum value for an input.
How to use:
min: 5
Type: number

validator.custom​

Specifies a custom validate function as string. Read more
How to use:
custom: 'HFFormDefinition.Namespace.validate'
Type: function
Signature: (field: object, value: string) => boolean

validator.errorHTML​

Specifies the error message that is shown to the user. An object can be defined for different messages, depending on the error type. In this case, a default type must exist. Valid HTML is allowed.
How to use:
errorHTML: 'Only <strong>inputs from the dropdown</strong> are allowed.'
Type: string

validator.errorText​

Specifies the error message that is shown to the user. An object can be defined for different messages, depending on the error type. In this case, a default type must exist. If errorHTML is also present, errorText is not used.
How to use:
errorText: 'Only inputs from the dropdown are allowed.'
Type: string

errorText / errorHTML interface

​

interface IErrorMessages {
    min?: string;
    max?: string;
    [custom: string]: string;
    default: string;
}

SelectBox​

Field value must be one of the option values if selected

<select id="select1" data-hf-control="SelectBox">
    <option value="value1">value 1</option>
    <option value="value2">value 2</option>
    ...
</select>

validator.custom​

Specifies a custom validate function as string. Read more
How to use:
custom: 'HFFormDefinition.Namespace.validate'
Type: function
Signature: (field: object, value: string) => boolean

validator.errorHTML​

Specifies the error message that is shown to the user. An object can be defined for different messages, depending on the error type. In this case, a default type must exist. Valid HTML is allowed.
How to use:
errorHTML: 'Only <strong>inputs from the dropdown</strong> are allowed.'
Type: string

validator.errorText​

Specifies the error message that is shown to the user. An object can be defined for different messages, depending on the error type. In this case, a default type must exist. If errorHTML is also present, errorText is not used.
How to use:
errorText: 'Only inputs from the dropdown are allowed.'
Type: string

errorText / errorHTML interface

​

interface IErrorMessages {
    [custom: string]: string;
    default: string;
}

TextField​

The TextField can be extended by the option validator.

Info

This overrules the HTML5 validation.

<input
    id="textfield1"
    type="(text|number|tel|email|date|time)"
    data-hf-control="TextField"
    data-hf-options="{
    ...,
    validator: {
        type?: 'text' | 'number' | 'email' | 'tel' | 'date' | 'time',
        min?: (number),
        max?: (number),
        step?: (number),

        minlength?: (number, text),
        maxlength?: (number, text),

        custom?: (function),

        pattern?: (RegExString),
        errorText?: (string | Object)
        errorHTML?: (string | Object)
    }
}"
/>

validator​

JavaScript RegExp algorithm (for more details see validator.pattern) or object of type validator.
How to use:
validator: { min: 5, max: 10, step: 0.1 }
Type: validator object

validator.custom​

Specifies a custom validate function as string. Read more
How to use:
custom: 'HFFormDefinition.Namespace.validate'
Type: function
Signature: (field: object, value: string) => boolean

validator.errorHTML​

Specifies the error message that is shown to the user. An object can be defined for different messages, depending on the error type. In this case, a default type must exist. Valid HTML is allowed.
How to use:
errorHTML: 'Only <strong>number</strong> inputs are allowed.'
Type: string | object

validator.errorText​

Specifies the error message that is shown to the user. An object can be defined for different messages, depending on the error type. In this case, a default type must exist. If errorHTML is also present, errorText is not used.
How to use:
errorText: 'Only number inputs are allowed.'
Type: string | object

validator.max​

Specifies the maximum value for an input.
How to use:
max: 10
Type: number

validator.maxlength​

Specifies the maximum number of characters allowed. Default for inputs is 1000 and textareas 5000.
How to use:
maxlength: 10
Type: number, text

validator.min​

Specifies a minimum value for an input.
How to use:
min: 5
Type: number

validator.minlength​

Specifies the minimum number of characters allowed.
How to use:
minlength: 5
Type: number, text

validator.pattern​

JavaScript RegExp algorithm, with the 'u' parameter treats the pattern as a sequence of unicode code points. The pattern is not surrounded by forward slashes and the tokens "^" and "$" are outdated, always the complete string is validated.
Pattern is case-sensitive and no multiline. Character escape or token starting with a backslash has to be escaped additionally.
For further details see (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-pattern, https://docs.microsoft.com/en-us/dotnet/standard/base-types/regular-expression-language-quick-reference). Sample patterns (http://html5pattern.com/).
Since Chrome 112 the "v" flag is used for pattern attribute with new standards for regular expressions. See https://github.com/tc39/proposal-regexp-v-flag
How to use:
pattern: '[0-9]{4}&#39
Type: regex

validator.step​

Specifies the legal number intervals for an input field.
How to use:
step: 0.1
Type: number

validator.type​

Type of input. Overrules HTML attribute type.
How to use:
type: 'number'
Type: 'text' | 'number' | 'email' | 'tel' | 'date' | 'time'

errorText / errorHTML interface

​

interface IErrorMessages {
    pattern?: string;
    number?: string;
    email?: string;
    min?: string;
    max?: string;
    minlength?: string;
    maxlength?: string;
    [custom: string]: string;
    default: string;
}

TimePicker​

<div
    id="repair_time_start"
    data-hf-control="TimePicker"
    data-hf-options="{
    defaultValue: 'now',
    required: true,
    min: '11:00',
    max: '19:00',
    label: 'Time start'
}"
></div>

validator.custom​

Specifies a custom validate function as string. Read more
How to use:
custom: 'HFFormDefinition.Namespace.validate'
Type: function
Signature: (field: object, value: string) => boolean

validator.errorHTML​

Specifies the error message that is shown to the user. An object can be defined for different messages, depending on the error type. In this case, a default type must exist. Valid HTML is allowed.
How to use:
errorHTML: 'Only <strong>inputs from the dropdown</strong> are allowed.'
Type: string

validator.errorText​

Specifies the error message that is shown to the user. An object can be defined for different messages, depending on the error type. In this case, a default type must exist. If errorHTML is also present, errorText is not used.
How to use:
errorText: 'Only inputs from the dropdown are allowed.'
Type: string

errorText / errorHTML interface

​

interface IErrorMessages {
    [custom: string]: string;
    default: string;
}

TreeView​

<div
    id="treeview_minimum"
    data-hf-control="TreeView"
    data-hf-options="{ 
    label: 'TreeView',   
    url: '/api/catalog/Hierarchietest/hierarchy',
    treeviewCtrlOptions: {
        dataTextField: 'Text',
        dataValueField: 'ID',
    },
    selectCtrlOptions:{
        placeholder: 'Open tree',
    },
    validator: {
        errorText: 'Plaese selct from catalog'
    }
}"
></div>

validator.custom​

Specifies a custom validate function as string. Read more
How to use:
custom: 'HFFormDefinition.Namespace.validate'
Type: function
Signature: (field: object, value: string) => boolean

validator.errorHTML​

Specifies the error message that is shown to the user. An object can be defined for different messages, depending on the error type. In this case, a default type must exist. Valid HTML is allowed.
How to use:
errorHTML: 'Only <strong>inputs from the dropdown</strong> are allowed.'
Type: string

validator.errorText​

Specifies the error message that is shown to the user. An object can be defined for different messages, depending on the error type. In this case, a default type must exist. If errorHTML is also present, errorText is not used.
How to use:
errorText: 'Only inputs from the dropdown are allowed.'
Type: string

errorText / errorHTML interface

​

interface IErrorMessages {
    [custom: string]: string;
    default: string;
}

Custom Validation (JS)

​

Some input controls can be validated by adding a custom validation function. Currently supported controls are the ComboBox, the DatePicker, the DropDownList, the NumericField, the SelectBox, the TextField, the TimePicker and the TreeView control.
These functions offer the possibility to compare two controls of the same type for example the fields "start time" and "end time" or to prevent the user to select identical values of ComboBoxes.

Info

These functions can return true, false or { errorType: 'custom' }. A returned error type can be used to display an individual error message by defining it in an errorText/errorHTML object.

export function setCustomTimeValidator(field, val) {
    const fieldTarget = HybridForms.API.Fields.getById('compare_time1');
    let t1 = Date.parse(fieldTarget.value);
    let t2 = Date.parse(val);
    if (t1 >= t2) {
        return false;
    }
    return true;
}

export function triggerTimeChange() {
    const ctrl = HybridForms.API.FormControls.getCtrl('compare_time2');
    if (ctrl && ctrl.ctrl) {
        HybridForms.API.FormControls.getCtrl('compare_time2').ctrl.trigger('change');
    }
}

Just add your custom validation function to your JavaScript file and in your HTML template call the function inside the control(s) by adding the data-hf-option validator.

<div
    id="compare_time1"
    data-hf-control="TimePicker"
    data-hf-options="{
        label: 'Begin time',
        defaultValue: 'now',
        emptyContent: 'hh:mm',
        format: 'HH:mm',
        onChanged: HFFormdefinition.DemoHelpers.triggerTimeChange
    }"
></div>

<div
    id="compare_time2"
    data-hf-control="TimePicker"
    data-hf-options="{
        label: 'End time',
        emptyContent: 'hh:mm',
        format: 'HH:mm',
        validator:{
            custom: 'HFFormdefinition.DemoHelpers.setCustomTimeValidator',
            errorHTML: 'End time can not be equal or before begin time!!!'
        }
    }"
></div>
Note

In case of comparing two values keep in mind to trigger any changes of the control to be compared with, so validation is working vice-versa.