Server Side Validation With Vue Form Component – 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.
vue-form-validation
Features:

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



Install

Install form validation component via NPM

npm install formvuelar --save

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: ''
            },
        //...

You might want to change some defaults globally for all your forms, to do this you just can overwrite them as a global property before registering your main vue instance:


Vue.prototype.$formvuelar = {
  noResultsText: 'No results found!',
  pleaseWaitText: 'Please wait...',
  addFileText: 'Add File',
  addFilesText: 'Add Files',
  filesSelectedText: 'Files Selected',
  dropFilesHereText: 'Drop files here or click to upload.',
  filesSelectedAndSizeText: 'files selected with a combined size of',
  headers: '{}'
}




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-search-select /> Select with search import { FvlSearchSelect } 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'

See live demo and download source code.

DEMO | DOWNLOAD

This awesome plugin is developed by janiskelemen. Visit their official github repository for more information and follow for future updates.