Orbeon Search

Comments? Feedback?

This wiki does not yet support public comments (a limitation of Google Sites), so we encourage you to post your comments either:

On Twitter by responding to @orbeon.

On our community mailing list: subscribe sending an email to ops-users-subscribe@ow2.org (content of subject/body doesn't matter), you'll get a response with the email to use to send your message to the community mailing list.

Recent site activity
How-to guides‎ > ‎XForms View‎ > ‎

Add an error summary and customize error reporting

Contents

  1. 1 The problem
  2. 2 The solution
  3. 3 Get the source

The problem

You would like to customize the way errors are reported to users:
  1. You want a star before the label of required fields, and want the star to be always shown, even after users have entered a value for that field:

  2. You want to customize the way invalid fields are styled, for instance using a little red dot next to the field, instead of the default icon with an exclamation mark:

  3. You want an error summary listing all the errors in the form:
  4. You don't want errors to show when the form is loaded. You want all the errors in the form to show when users try to save or submit the data. You want errors to show for fields users went through but for which they failed to provide a valid value.

The solution

First, to be able to better control the styling of form fields, you need to be in span mode, which is not the default. You can either choose to be in span mode on a form-by-form basis by adding xxforms:xhtml-layout="span" on the first <xforms:model> of your form, or globally by adding <property as="xs:string" name="oxf.xforms.xhtml-layout" value="span"/> to your properties-local.xml.
  1. Add a star to the left of the label with the following, adjusting the path to the star image as necessary depending on the location of your CSS file.

    .xforms-label { padding: 0 0 0 18px; }
    .xforms-required .xforms-label {
        background: url('../../../apps/fr/style/images/silk/bullet_star.png')
        left top no-repeat; }

  2. Hide the element normally used to show an error for a control:

    .xforms-alert-active, .xforms-alert-inactive { display: none; }

  3. Add an error summary component to your form with the observer pointing to a group containing the controls for which you want to report errors:

    <fr:error-summary id="error-summary" observer="form-group">
        <fr:label>Error in this form</fr:label>
    </fr:error-summary>

  4. So the error summary shows all the errors when users save (not just errors for the controls users went through), you dispatch the fr-visit-all event to the error summary. Also, you set a flag somewhere in an instance to true:

    <xforms:dispatch name="fr-visit-all" targetid="error-summary"/>
    <xforms:setvalue ref="instance('ui')/show-errors">true</xforms:setvalue>

    You use this flag to add a class show-errors on an element around all the controls using an AVT:

    <xforms:group class="{if (instance('ui')/show-errors = 'true') then 'show-errors' else ''}">

    Finally, in CSS, you can declare that you want a red bullet next to the fields that are invalid and have been visited by users, or fields that are invalid if the class show-errors have been set (i.e. if users attempted to save the form):

    .xforms-invalid-visited, .show-errors .xforms-invalid {
        background: url('../../../apps/fr/style/images/silk/bullet_red.png')
                    right top no-repeat;
        padding: 0 20px 1px 0; }

Get the source