Submission failed: invalid data Submission successfull

CSS
Hover the classes to see matching element(s) in the example
InlineAlert matches a body that uses inline alerts
xfInput matches an Element that represents a XForms input element
xfAlert matches an Element that represents a XForms alert element
xfControl matches an Element that represents a XForms control
xfLabel matches the label part of an XForms control
xfValue matches the widget part of an XForms control

# Default Alert Handler - inline alerts

This form shows the default alert handling which is choosen when you do not specify via some custom class (see other examples). This will show alert messages inline with their controls.

By default alerts are displayed to the right of the widget but this can be influenced by overwriting the xfAlert styles.

This form also uses hints and shows the coordination between alert and hint. A hint is always shown when focussing a field that has a hint. Alerts are shown once the data value attached to the control become invalid.

| XForms 1.1 Links
Recommendation
Quick Reference

## Example

Each field must have more than 5 characters to become valid A-label Your input is not long enough The input must be longer than 5 characters Bb-label Your input is not long enough The input must be longer than 5 characters Ccc-label The input must be longer than 5 characters Your input is not long enough Dddd-label The input must be longer than 5 characters Your input is not long enough Send

## XForms Markup

    <xf:model>
        <xf:instance>
            <data>
                <grouped-data>
                    <group>
                        <a></a>
                        <b></b>
                        <c></c>
                        <d></d>
                    </group>
                </grouped-data>
            </data>
        </xf:instance>
        <xf:submission id="echo" resource="echo:foo" method="GET" replace="none">
            <xf:message ev:event="xforms-submit-error">Submission failed: invalid data</xf:message>
            <xf:message ev:event="xforms-submit-done">Submission successfull</xf:message>
        </xf:submission>

        <xf:bind nodeset="grouped-data">
            <xf:bind nodeset="group">
                <xf:bind nodeset="a" constraint="string-length(.) > 5"></xf:bind>
                <xf:bind nodeset="b" constraint="string-length(.) > 5"></xf:bind>
                <xf:bind nodeset="c" constraint="string-length(.) > 5"></xf:bind>
                <xf:bind nodeset="d" constraint="string-length(.) > 5"></xf:bind>
            </xf:bind>
        </xf:bind>
    </xf:model>

    <xf:group ref="grouped-data/group" appearance="compact" class="InlineAlert">
        <xf:label>Each field must have more than 5 characters to become valid</xf:label>
        <xf:input id="input1" ref="a">
            <xf:label>A-label</xf:label>
            <xf:alert id="input1-alert">Your input is not long enough</xf:alert>
            <xf:hint id="input1-hint">The input must be longer than 5 characters</xf:hint>
        </xf:input>
        <xf:input id="input2" ref="b">
            <xf:label>Bb-label</xf:label>
            <xf:alert id="input2-alert">Your input is not long enough</xf:alert>
            <xf:hint id="input2-hint">The input must be longer than 5 characters</xf:hint>
        </xf:input>
        <xf:input id="input3" ref="c">
            <xf:label>Ccc-label</xf:label>
            <xf:hint id="input3-hint">The input must be longer than 5 characters</xf:hint>
            <xf:alert id="input3-alert">Your input is not long enough</xf:alert>
        </xf:input>
        <xf:input id="input4" ref="d">
            <xf:label>Dddd-label</xf:label>
            <xf:hint id="input4-hint">The input must be longer than 5 characters</xf:hint>
            <xf:alert id="input4-alert">Your input is not long enough</xf:alert>
        </xf:input>
    </xf:group>

    <xf:trigger>
        <xf:label>Send</xf:label>
        <xf:send submission="echo"></xf:send>
    </xf:trigger>