Laravel Form Validation

This package make use of AJAX to validate your forms with backend logic.

Vue.js version	Package version	Branch
2.x	1.x	1.x
3.x	2.x	main

Installation

npm install laravel-form-validation@^2 

Usage

An example using Vue.js v3.x and Bootstrap v4.x

<template>
    <form @submit.prevent="submit">

        <!-- Display a global message if there are any errors -->
        <div class="alert alert-danger my-3" v-show="form.$errors.any()">
            Please check the form and try again!
        </div>

        <div class="form-group">
            <label>Name</label>
            <input type="text"
                   class="form-control"
                   v-model="user.name"
                   :class="{ 'is-invalid': form.$errors.has('name') }"
                   @keyup="form.$errors.clear('name')">

            <!-- Display first error for a field -->
            <div class="invalid-feedback" v-show="form.$errors.has('name')">
                {{ form.$errors.first('name') }}
            </div>
        </div>

        <div class="form-group">
            <label>Avatar</label>
            <div class="custom-file">

                <!-- Transform File object to FormData() automatically -->
                <input type="file"
                       id="input-avatar"
                       accept="image/*"
                       :class="{ 'is-invalid': form.$errors.has('avatar') }"
                       @change="user.avatar = $event.target.files[0]">
                <label class="custom-file-label" for="input-avatar">Choose image...</label>

                <!-- Display all errors for a field -->
                <div class="invalid-feedback" v-show="form.$errors.has('avatar')">
                    <div v-for="message in form.$errors.get('name')">{{ message }}</div>
                </div>
            </div>
        </div>

        <!-- Get file upload progress percentage using form.$progress -->
        <div class="progress" v-show="form.$pending">
            <div class="progress-bar" :style="{ width: form.$progress + '%' }">{{ form.$progress }}%</div>
        </div>

        <!-- Prevent re-submit using form.$pending -->
        <button type="submit" :disabled="form.$pending">Submit</button>
    </form>
</template>

<script>
    import Form from 'laravel-form-validation';

    export default {
        data() {
            return {
                user: {name: 'Joy', avatar: null},
                form: new Form()
            }
        },

        methods: {
            submit() {
                this.form.post('/profile', this.user)
                    .then(response => {
                        // This is the data returned from your server
                        console.log(response);
                    })
                    .catch(error => {
                        // Handle errors
                    });
            }
        }
    }
</script>

API

You can take a look at individual classes and their methods

• Form
• Errors

Vue.js helpers

This package comes with two helpers to work with bootstrap css

Register in one shot

You can register the component and directive

import {VueFormPlugin} from "laravel-form-validation";

app.use(VueFormPlugin)

IsInvalid directive

Setup global directive manually

import {IsInvalidDirective} from 'laravel-form-validation';

app.directive('invalid', IsInvalidDirective);

Use on form inputs, you must specify name attribute on your input fields

<input type="email" v-invalid="form.$errors" name="email">

FieldError component

Setup global component manually

import {FieldErrorComponent} from 'laravel-form-validation';

app.component('field-error', FieldErrorComponent);

Use in forms to show validation message for specific field

<field-error :bag="form.$errors" field="email"></field-error>

Customize axios instance (optional)

The package uses axios for making AJAX requests, you can pass your own axios instance and the Form class will start using it.

// app.js
import axios from 'axios';
import Form from 'laravel-form-validation';
// Make your modifications
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
Form.$defaults.axios = axios;

Acknowledgements

This package is highly inspired by various other similar implementations:

• form-backend-validation
• form-object
• vform

Testing

• This package is using Jest for testing.
• Tests can be found in __test__ folder.
• Execute tests with this command npm test

License

MIT License