ValidationGroup

import { ValidationGroup } from 'cx/widgets';

The ValidationGroup element is pure container element which allows tracking the state of the form. If any of the fields inside it report a validation error, invalid state is reported to the data store.

First Name
Last Name

ValidatorGroups

<div class="widgets" style={{
    borderLeftWidth: '3px',
    borderLeftStyle: 'solid',
    borderLeftColor: { expr: '{$page.valid} ? "lightgreen" : "red"' }
}}>
    <ValidationGroup layout={LabelsLeftLayout} valid-bind="$page.valid">
        <TextField label="First Name" value-bind="$page.firstName" required />
        <TextField label="Last Name" value-bind="$page.lastName" required />
    </ValidationGroup>
</div>

Copied!Cx Fiddle

Examples:

Validation options

Configuration

Property	Description	Type
asterisk	Set to `true` to add red asterisk for all required fields inside the group.	boolean
disabled	Set to `true` to disable all inner elements that support `disabled` property.	boolean
enabled	Set to `false` to disable all inner elements that support `disabled` property.	boolean
invalid	Binding which will be set to true if any of child form field reports validation error.	boolean
isolated	Set to `true` to isolate children from participating in outer validation scopes.	boolean
readOnly	Set to `true` to make read-only all inner elements that support `readOnly` property.	boolean
strict	Set to `true` to move focus to the next field if `Enter` key is pressed.	boolean
tabOnEnterKey	Set to `true` to move focus to the next field if `Enter` key is pressed.	boolean
valid	Binding which will be set to true if all child form field are valid.	boolean
viewMode	Set to `true` to switch all inner fields into view mode.	boolean
items children	List of child elements.	array
layout	Define an inner layout.	string/object
mod	Appearance modifier. For example, `mod="big"` will add the CSS class `.cxm-big` to the block element.	string/array
outerLayout	Defines the outer layout which wraps the widget.	widget
plainText	Set to `true` to avoid converting inner strings to templates. Default is `false`.	boolean
preserveWhitespace ws	Keep whitespace in text based children. Default is `false`. See also `trimWhitespace`.	boolean
putInto contentFor	Used with outer layouts. Specifies the name of the content placeholder which should render the widget.	string
trimWhitespace	Remove all whitespace in text based children. Default is `true`. See also `preserveWhitespace`.	boolean
vdomKey	Key that will be used as the key when rendering the React component.	string
visible if	Visibility of the widget. Defaults to `true`.	boolean

Documentation

ValidationGroup