Form

Form wrapper that provides better security practices and automatic input validation based on HTML5 form validation API.

• Source

Features:

• 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.

Styled Example

Form Status

The form provides the following status:

• valid: Returns false if any contained input is invalid based on its HTML5 validation attributes.
• dirty: Returns true if any contained input has triggered its blur event.
• error: Returns true if the form is not valid and is dirty.

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 valid and 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).

Preventing Navigation

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 prevent-navigation prop

Clearing Inputs

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 clear() method.

Classes

• vts-form: The root form class.
• vts-form--invalid: Added to the form whenever the status valid is false.
• vts-form--dirty: Added to the form whenever the status dirty is true.
• vts-form--error: Added to the form whenever the status error is true.

Security

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.

Note that this security benefit is only applicable for server-side rendering AND if JavaScript fails.

To overright the method, simply provide method="GET" to the VForm component.