Git Product home page Git Product logo

form-backend-validation's Introduction

An easy way to validate forms using back end logic

Latest Version on NPM Software License Build Status npm

Wouldn't it be great if you could just use your back end to validate forms on the front end? This package provides a Form class does exactly that. It can post itself to a configured endpoint and manage errors. The class 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.

Postcardware

You're free to use this package (it's MIT-licensed), but if it makes it to your production environment we highly appreciate you sending us a postcard from your hometown, mentioning which of our package(s) you are using.

Our address is: Spatie, Samberstraat 69D, 2060 Antwerp, Belgium.

The best postcards will get published on the open source page on our website.

Install

You can install the package via yarn:

$ yarn add form-backend-validation

Or via npm:

$ npm install form-backend-validation

Usage

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

Screenshot

import Form from 'form-backend-validation';

// instantiate a form class with some value
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']);

// submitting the form, you can also use `.put`, `.patch` and `.delete`
form.post(anUrl)
   .then(response => ...)
   .catch(response => ...);

// returns true if request is being executed
form.processing;


// if there were any errors, you can get to them easily

// example errors object
{ 
    'field1': ['Value is required'], // single field
    'person.first_name': ['Value is required'], // field in person object
}

// returns an object in which the keys are the field names 
// and the values array with error message sent by the server
form.errors.all() 

// returns true if there were any error
form.errors.any(); 

// returns true if there is an error for the given field name or object
form.errors.has(key)

// returns an array with errors for the given field name
form.errors.get(key)

// shortcut for getting the erros for the given field name
form.getError(key)

// clear all errors
form.errors.clear()

// clear the error of the given field name or all errors on the given object
form.errors.clear(key)

Options

The Form class accepts a second options parameter.

const form = new Form({
    field1: 'value 1',
    field2: 'value 2',
}, {
    resetOnSuccess: false,
});

resetOnSuccess: bool

Default: true. Set to false if you don't want the form to reset to it's original values after a succesfull submit.

Changelog

Please see CHANGELOG for more information what has changed recently.

Testing

$ npm run test

Contributing

Please see CONTRIBUTING for details.

Security

If you discover any security related issues, please contact Freek Van der Herten instead of using the issue tracker.

Credits

Initial code of this package was copied from Jeffrey Way's Vue-Forms repo

About Spatie

Spatie is a webdesign agency based in Antwerp, Belgium. You'll find an overview of all our open source projects on our website.

License

The MIT License (MIT). Please see License File for more information.

form-backend-validation's People

Contributors

freekmurze avatar sebastiandedeyne avatar spyric avatar bbashy avatar zenginechris avatar davidhemphill avatar patroklo avatar sailingdeveloper avatar willemvb avatar

Watchers

James Cloos avatar Nathan Isaac avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.