formvuelar

Vue form components with server side validation in mind

FormVuelar is a set of predefined vue form components which are designed to automatically display errors coming back from your backend. It works out of the box with the error message bag that is returned by Laravel when submitting an ajax form.

Examples

Give it a try!

Getting Started

npm install formvuelar --save

Available Components

The following components are shipped with FormVuelar:

Name	Description	Import Name
<fvl-form />	Form wrapper element	import { FvlForm } from 'formvuelar'
<fvl-input />	Input field	import { FvlInput } from 'formvuelar'
<fvl-textarea />	Text area field	import { FvlTextarea } from 'formvuelar'
<fvl-Radio />	Radio input field	import { FvlRadio } from 'formvuelar'
<fvl-checkbox />	Check box input field	import { FvlCheckbox } from 'formvuelar'
<fvl-select />	Select input field	import { FvlSelect } from 'formvuelar'
<fvl-file />	File input field	import { FvlFile } from 'formvuelar'
<fvl-submit />	Submit button	import { FvlSubmit } from 'formvuelar'

Error Response

The response from your Backend should contain a Json error object and have a status of 422 in order to show the error messages below the input fields. This response format is default for Laravel and will work out of the box.

{
  "message": "The given data was invalid.",
  "errors": {
    "field-1": [
      "Error 1",
      "Error 2"
    ],
    "field-2": [
      "Error 1",
      "Error 2"
    ]
  }
}

Client side validation

You can still use the default HTML5 validation rules for all input fields like 'accept' and 'required' for file inputs:

    <fvl-file
        label="Avatar"
        name="avatar"
        :file.sync="form.file.avatar"
        accept="image/*"
        required
    />

Styling

The styling is totally up to you. All components have their own classes so you have full control over the look feel of every component.

Every component is wrapped with a div and the corresponding class .fvl-{type}-wrapper. Labels have a class name of .fvl-{type}-label. The field itself has a class name of .fvl-{type}

Example classes of the text input component (using Tailwind)

.fvl-input-wrapper {
    @apply p-2;
}
.fvl-input-label {
    @apply block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2;
}
.fvl-input {
    @apply appearance-none block w-full bg-grey-lighter text-grey-darkest border border-grey-lighter rounded py-3 px-4 leading-tight;
}

I'm using Tailwind CSS for the demo. Feel free to use the predefined css component classes for your own projects.