# Form

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


  • Automatic tracking of input validation.
  • 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.
  • Provides classes to style invalid, dirty, or error states.
  • Provides method for clearing every input.

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.

# Installation


// main.js
import Vue from 'vue';
import { VForm } from 'vuetensils/src/components';

Vue.component('VForm', VForm);


// SomeComponent.vue
import { VForm } from 'vuetensils/src/components';

export default {
  components: {
  // ...

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

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

Last Updated: 10/10/2020, 1:54:09 PM