Vue form components with server side validation in mind

FormVuelar

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.

Features

- Works out of the box with Laravel
- Axios integration
- File upload support including process indicator
- Dropzone with image preview (inspired by FilePont)
- Display validation error messages from error response

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-multi-file />	Multi file input field	import { FvlMultiFile } from 'formvuelar'
<fvl-dropzone />	Dropzone field	import { FvlDropzone } from 'formvuelar'
<fvl-submit />	Submit button	import { FvlSubmit } from 'formvuelar'

Components Props & Events

Name	Prop/Event	Type	Default	Possible values	Notes
fvl-form	:method	String	'post'	get|post|put|patch|delete
	:data	Object	{}	{}
	:url	String	null
	:multipart	Boolean	false	true|false
	@success	Function		axios response
	@error	Function		axios error response
	@upload-progress	Function		0-100
fvl-input	:value.sync	Data	''	form.name
	:id	String	null
	:name	String	''
	:label	String	null
	:type	String	'text'
	:placeholder	String	null
	:autocomplete	String	null
	:field-class	String	null
	:min	Number	null
	:max	Number	null
	:size	Number	null
	:step	Number	null
	:required	Boolean	false	true|false
	:readonly	Boolean	false	true|false
	:disabled	Boolean	false	true|false
	:pattern	String	null	regex
fvl-textarea	:value.sync	Data	''	form.about
	:id	String	null
	:name	String	''
	:label	String	null
	:placeholder	String	null
	:autocomplete	String	null
	:field-class	String	null
	:cols	Number	null
	:maxlength	Number	null
	:rows	Number	null
	:wrap	Boolean	null	hard|soft
	:required	Boolean	false	true|false
	:readonly	Boolean	false	true|false
	:disabled	Boolean	false	true|false
	:pattern	String	null	regex
fvl-select	:selected.sync	Data	null	form.favoriteColor
	:options	Object	{}	{'key': 'value', ...}
	:id	String	null
	:name	String	''
	:label	String	null
	:allow-empty	Boolean	false	true|false
	:placeholder	String	null
	:autocomplete	String	null
	:required	Boolean	false	true|false
	:readonly	Boolean	false	true|false
	:disabled	Boolean	false	true|false
fvl-radio	:checked.sync	Data	null	form.newsletter
	:options	Object	{}	{'key': 'value', ...}
	:id	String	null
	:name	String	''
	:label	String	null
	:required	Boolean	false	true|false
	:readonly	Boolean	false	true|false
	:disabled	Boolean	false	true|false
fvl-checkbox	:checked.sync	Data	null	form.terms
	:id	String	null
	:name	String	''
	:label	String	null
	:required	Boolean	false	true|false
	:readonly	Boolean	false	true|false
	:disabled	Boolean	false	true|false
fvl-file	:file.sync	Data	null	form.avatar
	:id	String	null
	:name	String	''
	:label	String	null
	:required	Boolean	false	true|false
	:readonly	Boolean	false	true|false
	:disabled	Boolean	false	true|false
fvl-multi-file	:files.sync	Data	null	form.gallery
	:id	String	null
	:name	String	''
	:label	String	null
	:required	Boolean	false	true|false
	:readonly	Boolean	false	true|false
	:disabled	Boolean	false	true|false
fvl-dropzone	:files.sync	Data	null	form.media
	:id	String	null
	:name	String	''
	:label	String	null
	:required	Boolean	false	true|false
	:readonly	Boolean	false	true|false
	:disabled	Boolean	false	true|false
fvl-submit	:loader	Boolean	false	true|false
	:disabled	Boolean	false	true|false

Basic Form Template

Create a form and sent it via post request to your server.

<!-- form wrapper -->
<fvl-form method="post" :data="form" url="/create">

    <!-- Text input component -->
    <fvl-input
        :value.sync="form.fullname"
        label="Full Name"
        name="fullname"
    />

    <!-- Textarea component -->
    <fvl-textarea
        :value.sync="form.bio"
        label="Bio"
        name="bio"
    />

    <!-- Radio component with options -->
    <fvl-radio
        :checked.sync="form.pet"
        :options="{'cat': 'Cat', 'dog': 'Dog'}"
        label="Favorite pet"
        name="pet"
    />

    <!-- Submit button -->
    <fvl-submit>Validate</fvl-submit>

</fvl-form>

The form object you pass into the form component above would look like this:

import { FvlForm, FvlInput, FvlTextarea, FvlRadio, FvlSubmit } from 'formvuelar'
...
    components: {
        FvlForm,
        FvlInput,
        FvlTextarea,
        FvlRadio,
        FvlSubmit,
    },
    data() {
        return {
            form: {
                fullname: '',
                bio: '',
                pet: ''
            },
        ...

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.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 and 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 examples. Feel free to use the predefined css component classes for your own projects.

TODO

- Advanced select component with search and remote source option
- Tags component

GitHub