form-backend-validation

THIS PACKAGE IS STILL IN DEVELOPMENT, DO NOT USE (YET)

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 Form class does exactly that. It can post itself to a configured endpoint and manage errors. The class meant to be used in a Vue component and works out of the box 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

Usage

This is an example of a fully configured form that could be built up in a Blade view.

<form @submit.prevent="onSubmit" @keydown="form.errors.clear($event.target.name)">
    <div>
        <label for="name">Name:</label>
        <input type="text" name="name" v-model="form.name"> 
        <span v-if="form.errors.has('name')" v-text="form.errors.get('name')"></span>
    </div>

    <div>
        <label for="text">Text:</label>
        <input type="text" name="text" v-model="form.text">
       <span v-if="form.errors.has('text')" v-text="form.errors.get('text')"></span>
    </div>

    <div>
        <button :disabled="form.errors.any()">Create news item</button>
    </div>
</form>

This is an example of a Vue component that uses the provided Form class.

new Vue({
    el: '#app',

    data: {
        form: new Form({
            name: '',
            text: ''
        })
    },

    methods: {
        onSubmit() {
            this.form.submit('post', '/newsItems');
        }
    }
});

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

• Freek Van der Herten
• All Contributors

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.