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></vf-status-bar> <vf-text label="User name:" required name="username" v-ref:username></vf-text> <vf-password label="Password:" required name="password" v-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
- 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 the
- In order to make field retrieval faster, it is recommended to use a
v-refwith the same value as the
nameproperty. 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
requiredrule can be passed as a plain boolean prop to any field, in keeping with HTML5 syntax.