A simple way to handle Laravel back-end validation in Vue 2.
Clone or download
cretueusebiu Merge pull request #42 from alfonsobries/master
Allow to pass axios config to the request helpers
Latest commit 20a8b18 Sep 1, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example Update examples Feb 16, 2018
src Merge pull request #42 from alfonsobries/master Sep 1, 2018
test Lint Sep 1, 2018
.babelrc Update vue-cli Feb 16, 2018
.editorconfig v0.5.0 Dec 5, 2016
.eslintrc Update vue-cli Feb 16, 2018
.gitignore Update vue-cli Feb 16, 2018
.travis.yml Add axios as dev dep Jul 26, 2017
CHANGELOG.md Update version Feb 19, 2018
LICENSE v0.7 Jan 7, 2017
README.md Update shield Mar 5, 2018
jest.config.js Add config Feb 16, 2018
package.json Update dependencies Sep 1, 2018
vue.config.js Update vue-cli Feb 16, 2018
yarn.lock Update dependencies Sep 1, 2018

README.md

vform

Latest Version on NPM Build Status Total Downloads

A simple way to handle Laravel back-end validation in Vue. Inspired from Laravel Spark.

vform

Installation

npm i axios vform

Usage

See the included examples.

Bootstrap 4 Markup:

<template>
<div id="app">
  <form @submit.prevent="login" @keydown="form.onKeydown($event)">
    <div class="form-group">
      <label>Username</label>
      <input v-model="form.username" type="text" name="username"
        class="form-control" :class="{ 'is-invalid': form.errors.has('username') }">
      <has-error :form="form" field="username"></has-error>
    </div>

    <div class="form-group">
      <label>Password</label>
      <input v-model="form.password" type="password" name="password"
        class="form-control" :class="{ 'is-invalid': form.errors.has('password') }">
      <has-error :form="form" field="password"></has-error>
    </div>

    <button :disabled="form.busy" type="submit" class="btn btn-primary">Log In</button>
  </form>
</div>  
</template>

<script>
import Vue from 'vue'
import { Form, HasError, AlertError } from 'vform'

Vue.component(HasError.name, HasError)
Vue.component(AlertError.name, AlertError)

new Vue({
  el: '#app',
  
  data () {
    return {
      // Create a new form instance
      form: new Form({
        username: '',
        password: '',
        remember: false
      })
    }
  },

  methods: {
    login () {
      // Submit the form via a POST request
      this.form.post('/login')
        .then(({ data }) => { console.log(data) })
    }
  }
})
</script>

Laravel Controller:

class LoginController extends Controller
{
    public function login(Request $request)
    {
        $this->validate($request, [
            'username' => 'required',
            'password' => 'required',
        ]);

        // ...
    }
}

Api

Form

/**
 * Indicates if the form is sent to the server.
 *
 * @var {Boolean}
 */
busy

/**
 * Indicates if the response form the server was successful.
 *
 * @var {Boolean}
 */
successful

/**
 * Contains the validation errors from the server.
 * 
 * @var {Errors}
 */
errors

/**
 * Create a new form instance.
 *
 * @param {Object} data
 */
constructor (data = {})

/**
 * Submit the from via a POST|PATCH|PUT|DELETE|GET request.
 *
 * @param  {String} url
 * @return {Promise}
 */
post|patch|put|delete|get (url)

/**
 * Clear the form errors.
 */
clear ()

/**
 * Reset the form fields.
 */
reset ()

/**
 * Fill form data.
 *
 * @param {Object} data
 */
fill (data)

Errors

/**
 * Get all the errors.
 *
 * @return {Object}
 */
all ()

/**
 * Determine if there is an error for the given field.
 *
 * @param  {String} field
 * @return {Boolean}
 */
has (field)

/**
 * Determine if there are any errors for the given fields.
 *
 * @param  {...String} fields
 * @return {Boolean}
 */
hasAny (...fields)

/**
 * Determine if there are any errors.
 *
 * @return {Boolean}
 */
any ()

/**
 * Get the first error message for the given field.
 *
 * @param  String} field
 * @return {String|undefined}
 */
get (field)

/**
 * Get all the error messages for the given field.
 *
 * @param  {String} field
 * @return {Array}
 */
getAll (field)

/**
 * Get the error message for the given fields.
 *
 * @param  {...String} fields
 * @return {Array}
 */
only (...fields)

/**
 * Get all the errors in a flat array.
 *
 * @return {Array}
 */
flatten ()

/**
 * Clear one or all error fields.
 *
 * @param {String|undefined} field
 */
clear (field)

/**
 * Set the errors object.
 *
 * @param {Object}
 */
set (errors)

/**
 * Set a specified error message.
 *
 * @param {String}
 * @param {String}
 */
set (field, message)

Bootstrap Components

Components for Bootstrap 3 and 4.

import { 
  HasError,
  AlertError,
  AlertErrors, 
  AlertSuccess
} from 'vform'

Vue.component(HasError.name, HasError)
Vue.component(AlertError.name, AlertError)
Vue.component(AlertErrors.name, AlertErrors)
Vue.component(AlertSuccess.name, AlertSuccess)

has-error

Display the validation error for a field.

<!-- Bootstrap 4 -->
<div class="form-group">
  <label>Username</label>
  <input v-model="form.username" type="text" name="username"
    class="form-control" :class="{ 'is-invalid': form.errors.has('username') }">
  <has-error :form="form" field="username"></has-error>
</div>

<!-- Bootstrap 3 -->
<div class="form-group" :class="{ 'has-error': form.errors.has('username') }">
  <label>Username</label>
  <input v-model="form.username" type="text" name="username" class="form-control">
  <has-error :form="form" field="username"></has-error>
</div>

alert-error

Show a danger alert if there are any errors.

<alert-error :form="form" message="There were some problems with your input."></alert-error>

alert-errors

Show a danger alert with the list of errors for each field.

<alert-errors :form="form" message="There were some problems with your input."></alert-errors>
<!-- Or -->
<alert-errors :form="form">There were some problems with your input.</alert-errors>

alert-success

Show a success alert on a successful request.

<alert-success :form="form" message="Your changes have been saved!"></alert-success>
<!-- Or -->
<alert-success :form="form">Your changes have been saved!</alert-success>

Changelog

Please see CHANGELOG for more information what has changed recently.