# Form

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

Features:

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

Source

# Installation

Globally:

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

Vue.component("VForm", VForm)

Locally:

<script>
// SomeComponent.vue
import { VForm } from "vuetensils/src/components"

export default {
  components: {
    VForm,
  },
  // ...
}
</script>

# 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: 4/18/2020, 3:57:00 PM