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

Last update: Apr 10, 2018

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 @unisharp/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>Usernamelabel>
      <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>Passwordlabel>
      <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 Inbutton>
  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

/**
 * Determine if change busy status after successful submit.
 *
 * @var {Boolean}
 */
keepBusy

/**
 * 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
 * @param {Object} axios
 */
constructor (data = {}, axios = null)

/**
 * 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 ()

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)

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.

">

<div class="form-group">
  <label>Usernamelabel>
  <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" :class="{ 'has-error': form.errors.has('username') }">
  <label>Usernamelabel>
  <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>

alert-success

Show a success alert on a successful request.

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

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

Changelog

Please see CHANGELOG for more information what has changed recently.

GitHub

https://github.com/UniSharp/vform
You might also like...

πŸ‘·A component that allows creating forms with two-way binding from data object with default HTML fields and custom, like multi-block or AJAX-select.

πŸ‘·A component that allows creating forms with two-way binding from data object with default HTML fields and custom, like multi-block or AJAX-select.

From Builder A component that allows creating forms with two-way binding from data object with default HTML fields and custom, like multi-block or AJA

Mar 10, 2022

Reactive Form Builder for Vue.js with Laravel Support

Reactive Form Builder for Vue.js with Laravel Support

Dynamic Form Builder for Laravel with Vue.js Create even the most complex forms with ease, using two-sided validation, eloquent, nested elements, cond

Jun 22, 2022

Laravel Enso Form Builder is a customizable, template based form creator, so you can quickly create forms with the minimum amount of effort

Laravel Enso Form Builder is a customizable, template based form creator, so you can quickly create forms with the minimum amount of effort

Forms JSON-based Form builder for Laravel Enso This package can work independently of the Enso ecosystem. The front end implementation that utilizes t

Mar 9, 2022

A Vue.js component for creating simple AJAX forms.

vue-ajax-form-component A Vue.js component for creating simple AJAX forms. Install Available through npm as vue-ajax-form-component. Or include as an

Jan 14, 2022

Simple, lightweight, and flexible schema-based form for Vue.js

Simple, lightweight, and flexible schema-based form for Vue.js

Simple, lightweight, and flexible schema-based form for Vue.js

May 9, 2022

A simple web form app written in Vue

vue-form A simple web form app built with Vue. Live demo: https://goofy-mestorf-0699ac.netlify.com Project setup yarn install Compiles and hot-reload

Oct 10, 2021

a simple web form created with vue.js to study how the framework works

web-form Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Lints

Dec 26, 2021

Generate Vue Forms and Data-tables fast with a simple JSON-like syntax ⚑️

Generate Vue Forms and Data-tables fast with a simple JSON-like syntax ⚑️

Blitzar Generate Vue Forms and Data-tables fast with a simple JSON-like syntax ⚑️ npm i blitzar Documentation Vue 3 blitzar.cycraft.co Vue 2 blitzar0.

Jun 19, 2022

Secured & Simple Supabase Schema Visualizer

Secured & Simple Supabase Schema Visualizer

Supabase Schema Secured & Simple Supabase Schema Visualizer. No installations β€’ No Database password required. View Demo Β· Report Bug Β· Request Featur

Jun 28, 2022
Related tags
Easy to use AJAX forms written to handle symfony form errors

vue-symfony-form Easy to use AJAX forms written to handle symfony form errors. Set Up Enable symfony-form plugin and add connector: import symfonyForm

Aug 19, 2021
Simple Implementation of Multi Step Form in Vue JS along with Validation with Vee-Validate
Simple Implementation of Multi Step Form in Vue JS along with Validation with Vee-Validate

VueJS Simple Form Wizard Simple Implementation of Multi Step Form with Validation in Vue Template This is how you can declare a multistep form templat

Jun 17, 2022
πŸ“‹ Fresh way to create simple or complex forms – without programming!
πŸ“‹ Fresh way to create simple or complex forms – without programming!

?? Vue Described-Data Form A fresh way to create simple or complex forms – without programming! ?? Demo Try it yourself in a Live Demo! ?? About vue-d

Apr 11, 2022
Vue Form Components - Clean & minimal vue form elements and form builder with validation

Vue Form Components - Clean & minimal vue form elements and form builder with validation

Nov 5, 2019
Generate a vue form with validation from an array

vue-form-json Generate a vue form with validation from an array All fields are required and input text by default. Once submitted, an event 'formSubmi

May 5, 2022
A set of Vue components to rapidly build forms with Tailwind CSS v2.0. It supports validation, model binding, includes default vendor styling and is fully customizable!

A set of Vue components to rapidly build forms with Tailwind CSS v2.0. It supports validation, model binding, includes default vendor styling and is fully customizable!

Jun 28, 2022
This component is a form with validation and more using only javascript objects

ic-formly This component is a form with validation and more using only javascript objects Installation Using yarn yarn add ic-formly Using npm npm i -

Jul 30, 2020
🍻 ncform, a very nice configuration generation way to develop forms ( vue, json-schema, form, generator )
🍻 ncform, a very nice configuration generation way to develop forms ( vue, json-schema, form, generator )

ncform δΈ­ζ–‡η‰ˆ ncform, a nice form development way that generates form UIs and their interactions with just configuration. Comes with standard components

Jun 28, 2022
Easy way to dynamically create reactive forms in Vue based on a varying business object model
Easy way to dynamically create reactive forms in Vue based on a varying business object model

Easy way to dynamically create reactive forms in Vue based on a varying business object model

Jun 23, 2022
Post formdata using a synchronous way for Vue.js

Post formdata using a synchronous way for Vue.js

Jan 22, 2018