Form wrapper that provides better security practices and automatic input validation based on HTML5 form validation API.
- Status tracking for inputs losing focus (
dirty), having changes (
modified), validation states (
valid), and having errors.
- Works with any
<input>element. Not just Vuetensil's VInput. Even works with 3rd party libraries as long as the
<input>element is used in the DOM.
- Prevent navigation if the form has been changed but has not been submitted.
- Provides classes to style invalid, dirty, or error states.
- Provides method for clearing every input.
- Supports honeypots to help reduce spam.
Important: Every input should have a
name. This is important for HTML forms, in general, but also helps VForm keep track. If none is provided, it will still work though.
The form provides the following status:
falseif any contained input is invalid based on its HTML5 validation attributes.
trueif any contained input has triggered its
trueif the form is not
Valid And Invalid Events
You probably want to run different logic in the event of an invalid form submission and a valid form submission. Most of this logic must happen within the
submit event and you need to do some conditional logic.
To avoid that, VForm provides
invalid events that you can hook into for convenience. The events both receive the form's
submit event and can therefore be treated like a standard submit. The main difference is that they only run at their appropriate times.
Note that custom events do not allow for modifiers such as
.prevent, therefore if you want to prevent the browser from reloading (native behavior), you will want to call the
event.preventDefault() method. We also use
novalidate here to prevent the native validation from running.
Important: If you provide the
invalid listener, the form will also append the
novalidate attribtue which means the default HTML validation logic will not run. So you will want to handle showing the user the errors gracefully (which is kind of the intention of this event anyway).
Sometimes you may want to prevent user navigation when a form has been modified, but not yet submitted. This can be a user experience improvement, especially on long forms, to avoid losing work.
To do so you can use the
Sometimes we need to clear our forms. HTML provides us with a
reset input and a reset button, but those only clear the form if the form was originally cleared to begin with.
Fortunately, VForm provides a
vts-form: The root form class.
vts-form--invalid: Added to the form whenever the status
vts-form--dirty: Added to the form whenever the status
vts-form--error: Added to the form whenever the status
By default, the form will set the
method attribute to
POST. This is SLIGHTLY more secure to avoid adding sensitive data to a query string.
To overright the method, simply provide
method="GET" to the VForm component.