Form Backend Validation

Sharing is caring!

An easy way to validate forms using back end logic

Wouldn’t it be great if you could just use your back end to validate forms on the front end? This package provides a Formclass that does exactly that. It can post itself to a configured endpoint and manage errors. The class is meant to be used with a Laravel back end.

Take a look at the usage section to view a detailed example on how to use it.

The code of this package is based on the Object-Oriented Forms lesson in the Vue 2.0 series on Laracasts.


You can install the package via yarn (or npm):

yarn add form<span class="token operator">-</span>backend<span class="token operator">-</span>validation

By default, this package expects axios to be installed (unless you’re using your own http library, see the Options section for that).

yarn add axios


You can find an example implementation with Laravel and Vue in the spatie/form-backend-validation-example-app repo.


import Form from 'form-backend-validation';

// Instantiate a form class with some values
const form = new Form({
    field1: 'value 1',
    field2: 'value 2',
    person: {
        first_name: 'John',
        last_name: 'Doe',

// A form can also be initiated with an array
const form = new Form(['field1', 'field2']);

// Submit the form, you can also use `.put`, `.patch` and `.delete`
   .then(response =&gt; ...)
   .catch(response =&gt; ...);

// Returns true if request is being executed

// If there were any validation errors, you easily access them

// Example error response (json)
    "errors": {
        "field1": ['Value is required'],
        "field2": ['Value is required']

// Returns an object in which the keys are the field names
// and the values array with error message sent by the server

// Returns true if there were any error

// Returns true if there is an error for the given field name or object

// Returns the first error for the given field name

// Returns an array with errors for the given field name

// Shortcut for getting the errors for the given field name

// Clear all errors

// Clear the error of the given field name or all errors on the given object

// Returns an object containing fields based on the given array of field names

// Reset the values of the form to those passed to the constructor

// Set the values which should be used when calling reset()

// Populate a form after its instantiation, the populated fields will override the initial fields
// Fields not present at instantiation will not be populated
const form = new Form({
    field1: '',
    field2: '',

    field1: 'foo',
    field2: 'bar',

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.