Initializing help system before first use

Form Layout and Validation

The default layout for forms is horizontal, meaning that each field is on a separate line, contains a label on the left and an input control on the right.
Again by default, the label and input will have a grid size of 2 if placed within an unsized <vdl-column> element such as: 
<vdl version="4.1">
  <vdl-page>
   <br/>
    <vdl-section>
    <vdl-column>
      <vdl-form>
        <vdl-field entity="changeShare"
                   options-set="SHARES">
        </vdl-field>
        <vdl-field entity="cautionText"></vdl-field>
      </vdl-form>
    </vdl-column>
    </vdl-section>
  </vdl-page>
</vdl>

How a Default Form Layout Appears

Appearance of the Default Form Layout

This approach is representative of VDL forms as they were up to and including VDL version 2.0.

There is now an alternative approach to controlling the width of a VDL form, which is by setting the size attribute to a grid value in the containing <vdl-column> element. 
<vdl version="4.1">
  <vdl-page>
   <br/>
    <vdl-section>
    <vdl-column size="6">
      <vdl-form>
        <vdl-field entity="changeShare"
                   options-set="SHARES">
        </vdl-field>
        <vdl-field entity="cautionText"></vdl-field>
      </vdl-form>
     </vdl-column>
    </vdl-section>
  </vdl-page>
</vdl>

Rendered View of Alternative Form Layout

Rendered View of Alternative Form Layout

Using this method, the form uses the grid size for the form width via the size attribute. In this case, with a column size of 6, the label and input fields both have a grid size of 3 (half the column size). This arrangement works all the way from a grid size of 12 down to 2.

The layout mode can be changed to vertical, where each field remains on a separate line but the labels appear above the associated input controls. This is accomplished by simply specifying a layout="vertical" attribute on a <vdl-form> element.

A final available option is to use inline inputs, which display the input controls without labels, and float inline with text etc. This is easy to achieve with the inline attribute of the <vdl-field> element.

Form Field Validation

Validation is applied to all fields in a form. There is standard, built-in validation, but it is also possible to define custom validators for fields. Validation is applied as you type or select values. When a value becomes invalid, the field is highlighted with a red background. If you try to save an invalid value, a message dialog appears, containing a validation failure message.

Parent Topic Working with VDL Forms