Form Validation Options

import { ValidationGroup, ValidationError } from 'cx/widgets';

Form fields indicate invalid input to the user by providing visual feedback such as changing border colors, displaying tooltips or error messages.

By default, inputs will change colors and provide an error tooltip.

If you click on the field below and then click somewhere else, you'll see the change. Furthermore, if you hover over the input with the mouse (or touch it) afterwards, the tooltip will appear as well.

Name

Index

<TextField
    label="Name"
    value-bind="$page.default"
    placeholder="Required"
    required
/>

Copied!Cx Fiddle

Required fields can be highlighted by setting the asterisk flag. Alternatively, fields can be marked as visited which will force them to show validation errors immediately.

Asterisk *
Visited

Index

<TextField label="Asterisk" value-bind="$page.asterisk" placeholder="Required" required asterisk />
<TextField label="Visited" value-bind="$page.visited" placeholder="Required" required visited />

Copied!Cx Fiddle

Form fields provide the help property which can be used to display additional information next to the field.

Help

Help text

Index

<TextField
    label="Help"
    value-bind="$page.help"
    help={<span style="font-size:smaller">Help text</span>}
/>

Copied!Cx Fiddle

help can be used to put any content next to the field. This can be a button or a validation error. Please note that the second field in the example below will show both the tooltip and the error message.

Help
Help	This field is required.

Index

<ValidationGroup layout={LabelsLeftLayout}>
    <TextField label="Help" value-bind="$page.help2" help={<Button icon="calculator" mod="hollow"/>}
    />
    <TextField label="Help" value-bind="$page.help2" required visited help={ValidationError}
    />
</ValidationGroup>

Copied!Cx Fiddle

Sometimes, tooltips are not the best way to indicate errors. Instead of a tooltip, you may decide to show only the error message. In that case, make sure that all fields are wrapped inside a ValidationGroup element.

Help	This field is required.
Help Block	This field is required.

Index

<ValidationGroup layout={LabelsLeftLayout}>
    <TextField label="Help" value-bind="$page.help3" required visited
        minLength={5} validationMode="help" />

    <TextField label="Help Block" value-bind="$page.help4" required visited
        minLength={5} validationMode="help-block" />
</ValidationGroup>

Copied!Cx Fiddle

Validation Methods

Form fields accept validation callback functions through onValidate.

Favorite framework?

Index

<TextField
    label="Favorite framework?" value-bind="$page.framework"
    validationMode="help-block" reactOn="enter blur"
    onValidate={(v) => {
        if (v != 'Cx')
            return 'Oops, wrong answer!'
    }}
/>

Copied!Cx Fiddle

onValidate can be used for server validation by returning a promise.

Username

This field is required.

Index

<ValidationGroup layout={LabelsTopLayout}>
    <TextField
        label="Username"
        value-bind="$page.form.username"
        required visited
        onValidate={
            v => new Promise(fulfill => {
                setTimeout(() => {
                    fulfill(v == 'cx' ? "This name is taken." : false);
                }, 500)
            })
        }
        help={
            <div layout={FirstVisibleChildLayout}>
                <ValidationError />
                <Icon name="check" style="color:green"/>
            </div>
        }
    />
</ValidationGroup>

Copied!Cx Fiddle

Documentation

Form Validation Options

Validation Methods