Version: 9.1

Form Field Validation

There are several ways to control the user's input, restrict the type of characters or the maximal length or match the input values to acertain 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 functions can be used by assigning the correct type to the form control HFWinJSCtrl.TextField.

TextField

TextField with no validation:

<input id="text1" data-win-control="HFWinJSCtrl.TextField" type="text">

TextField with type number:

<input id="number1" data-win-control="HFWinJSCtrl.TextField" type="number">

TextField with type telephone:

<input id="tel1" data-win-control="HFWinJSCtrl.TextField" type="tel">

TextField with type e-mail:

<input id="email1" data-win-control="HFWinJSCtrl.TextField" type="email">

TextField with type date - ! Not supported by IE11 and OS X Safari !

<input id="date1" data-win-control="HFWinJSCtrl.TextField" type="date">

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-win-option "required: true", which checks if a field has been filled in, you can define more individual validation rules by adding the data-win-option "validator" or by defining a custom validation function.

TextField

The HFWinJSCtrl.TextField can be extended by the option validator.

Info

This overrules the HTML5 validation.

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

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

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

Property	Type	How to use	Description
validator	validator Object	`validator: { min: 5, max: 10, step: 0.1 }`	JavaScript RegExp algorithm (for more details see validator.pattern) or object of type `validator`.
validator.type	'text' \| 'number' \| 'email' \| 'tel' \| 'date' (optional)	`type: 'text'`	Type of input. Overrules html attribute type.
validator.min	number (optional)	`min: 5`	Specifies a minimum value for an input.
validator.max	number (optional)	`max: 10`	Specifies the maximum value for an input.
validator.step	number (optional)	`step: 0.1`	Specifies the legal number intervals for an input field.
validator.minlength	number, text (optional	`minlength: 5`	Specifies the minimum number of characters allowed.
validator.maxlength	number, text (optional)	`maxlength: 10`	Specifies the maximum number of characters allowed.
validator.pattern	RegEx (optional)	`pattern: '[0-9]{4}'` `pattern: '[0-9\\s]{4}'`	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 obsolete,
always the complete string is validated.
Pattern is case-sensitive, no multiline, any character class,
character escape or anchor 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/)
validator.errorText	string (optional)	`errorText: 'Only number inputs are allowed.'`	Specifies the error message that is shown to the user. If `errorHTML` is also present, `errorText` is not used.
validator.errorHTML	string (optional)	`errorHTML: 'Only <strong>number</strong> inputs are allowed.'`	Specifies the error message that is shown to the user. Valid HTML is allowed.

ComboBox

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

<div id="combobox1" data-win-control="HFWinJSCtrl.ComboBox" data-win-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>

Property	Type	How to use	Description
required	boolean	`required: true`	Set "true" if the control has to be filled in.
anytext	boolean	`anytext: true`	Allows free text input. Default is `true`.
validator.errorText	string (optional)	`errorText: 'Only inputs from the dropdown are allowed.'`	Specifies the error message that is shown to the user. If `errorHTML` is also present, `errorText` is not used.
validator.errorHTML	string (optional)	`errorHTML: 'Only <strong>inputs from the dropdown</strong are allowed.'`	Specifies the error message that is shown to the user. Valid HTML is allowed.

DatePicker

<div id="birthday" data-win-control="HFWinJSCtrl.DatePicker" data-win-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>

Property	Type	How to use	Description
required	boolean	`required: true`	Set "true" if the control has to be filled in.
displayValueFormat	string	`displayValueFormat: 'dd.MM.yyyy'`	To change the format of the displayed date.
max	string	`max: 'now'`	Thee option "now" restricts the input of the newest possible entry to the current day. Format for fixed dates is dd.MM.yyyy
min	string	`min: '1965-05-14'`	Set to allow entries from that date on. Format is dd.MM.yyyy and default value is 01.01.1900
parseFormats	string[]	`parseFormats: ['dd.MM.yyyy', 'ddMMyyyy', 'dd/MM/yyyy', 'dd-MM-yyyy']`	Used to give the user several format options to type in the date.
validator.errorText	string (optional)	`errorText: 'Please enter a valid date.'`	Specifies the error message that is shown to the user. If `errorHTML` is also present, `errorText` is not used.
validator.errorHTML	string (optional)	`errorHTML: 'Please enter a <strong>valid date</strong>.'`	Specifies the error message that is shown to the user. Valid HTML is allowed.

SelectBox

Field value must be one of the option values if selected

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

RadioBox

Field value must be one of the radio values if checked:

<input id="radio1" data-win-control="HFWinJSCtrl.RadioBox" type="radio" name="name" value="value1">
<input id="radio2" data-win-control="HFWinJSCtrl.RadioBox" type="radio" name="name" value="value2">
...

CheckBox

Field value must be the checkbox value if checked:

<input id="checkbox1" data-win-control="HFWinJSCtrl.CheckBox" type="checkbox" value="value1">

Custom Validation (JS)

Some input controls can be validated by adding a custom validation function. Currently supported controls are the ComboBox, the DatePicker, the TimePicker and the SelectBox 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 only return true or false.

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-win-option validator.

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

<div id="compare_time2"
    data-win-control="HFWinJSCtrl.TimePicker"
    data-win-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.

Form Field Validation

HTML5 Field Validation​

TextField​

Extra Validation​

TextField​

ComboBox​

DatePicker​

SelectBox​

RadioBox​

CheckBox​

Custom Validation (JS)​

HTML5 Field Validation

TextField

Extra Validation

TextField

ComboBox

DatePicker

SelectBox

RadioBox

CheckBox

Custom Validation (JS)