Validator

<ValidationGroup layout={LabelsTopLayout}
    valid-bind="$page.valid"
    errors-bind="$page.errors"
>
    <NumberField label="X" value-bind="$page.x" required requiredText="Please enter X." style="width: 50px"/>
    +
    <NumberField label="Y" value-bind="$page.y" required requiredText="Please enter Y."  style="width: 50px"/>
    =
    <LabeledContainer label="X + Y">
        <span text-expr="{$page.x} + {$page.y}" />
    </LabeledContainer>
    <Validator
        value-expr="{$page.x} + {$page.y}"
        onValidate={(value) => value != 20 && 'X + Y != 20'}
    />
</ValidationGroup>
<ul>
    <Repeater records-bind="$page.errors">
        <li text-bind="$record.message" style="color: red;" />
    </Repeater>
</ul>

<ValidationGroup
    valid-bind="valid"
    errors-bind="errors"
    visited-bind="visited"
>
    <LabelsLeftLayout>
        <TextField
            value-bind="username"
            required
            label="Username"
            asterisk
        />
        <TextField
            inputType="password"
            value-bind="password"
            required
            label="Password"
            asterisk
        />
        <TextField
            inputType="password"
            value-bind="repeatPassword"
            required
            label="Repeat password"
            asterisk
        />
        <Validator
            value-expr="{password} != {repeatPassword}"
            onValidate={(value) => value && "Passwords don't match."}
        >
            <div style="margin: 10px 0">
                <ValidationError
                    style={{
                        padding: "10px",
                        background: "rgba(255, 0, 0, 0.3)",
                        borderRadius: "5px"
                    }}
                />
            </div>
        </Validator>
        <Button submit>Sign Up</Button>
    </LabelsLeftLayout>
</ValidationGroup>