Configuration¶

Field container¶

A field must always have a container, which is used by FormZ to display or hide the entire block under some conditions.

1
2
3
4
5

<div fz-field-container="email">
    <label for="email">Email:</label>

    <f:form.textfield property="email" id="email" />
</div>

In this example, the first element <div> is considered by FormZ as the container of the field email.

By default, the attribute which you should be using is fz-field-container, which must contain the name of the field. It is possible to customize the used attribute, see “Field container selector”.

Message container¶

The same way the field container must be registered, the message container for this field must also be defined. Then, FormZ can display or hide this element according to the presence of messages (mainly errors) or not.

This container is divided into two parts: a global container, and a container for the list of messages. For instance:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

    <div fz-field-message-container="email">
        This field contains at least an error:

        <div fz-field-message-list="email">
            <f:form.validationResults for="exForm.email">
                <f:for each="{validationResults.errors}" as="error">
                    <fz:formatMessage message="{error}" />
                </f:for>
            </f:form.validationResults>
        </div>
    </div>

In this example, the messages container is identified with fz-field-message-container="email", and the container of the messages list with fz-field-message-list="email". If the field email does not contain any message, the first container will be hidden.

The attributes used in this example are the default ones. It's possible to customize them, see “Messages container selector” and “Messages list container selector”.

Message template¶

Messages are automatically handled by JavaScript and Fluid. It works this way: when a field returns a message, it's wrapped inside a HTML template, then put into the messages container (see above).

Of course, it can be necessary that the message template changes according to the platforms, style guides, and other things. You can customize the template of messages for every field. The default value of this template is:

<span class="js-validation-rule-#VALIDATOR# js-validation-type-#TYPE# js-validation-message-#KEY#">#MESSAGE#</span>

In the template, the following values are dynamically replaced:

• #FIELD#: name of the field;
• #FIELD_ID#: “id” attribute of the field. Note that for fields of type “radio” or “checkbox” using this marker is useless.
• #VALIDATOR#: name of the validation rule which returned this message. For instance, it can be required;
• #TYPE#: type of the message, usually an error (in which case the value is error);
• #KEY#: key of the message. In most cases, it's set to default;
• #MESSAGE#: body of the message.

You can customize the message template in several ways:

<script type="text/template" fz-message-template="1">
    <li class="#TYPE#">#MESSAGE#</li>
</script>