Getting Started

Before we get into a detailed overview, Let's create a login form to demonstrate the syntax.

<vf-form action="process-form" method="POST" :validation="validation" :options="options">
  <vf-status-bar ref="statusbar"></vf-status-bar>
  <vf-text label="User name:" required name="username" ref="username"></vf-text>
  <vf-password label="Password:" required name="password" ref="password"></vf-password>
  <vf-submit></vf-submit>
</vf-form>

A few points to notice in this brief example:

• All of the plugin components are namespaced using a vf- prefix.
• By default the form is sent to the server using a normal HTTP request. See next page for other options.
• The status bar is an optional, yet highly recommended, component which can be used to display various messages during the form's lifecycle.
• All fields must have label and name props. The label can be hidden using the hide-label prop
• In order to make field retrieval faster, it is recommended to use a ref with the same value as the name property. This will allow the plugin the retrieve the field by its pointer, rather than by iterating through the components' tree.
• Due to its prevalence the required rule can be passed as a plain boolean prop to any field, in keeping with HTML5 syntax.