npm

Need private packages and team management tools?Check out npm Orgs. »

laravel-form-validation

0.1.1 • Public • Published

Laravel Form Validation

downloads npm-version github-tag license build-status codecov

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

Installation

# npm 
npm install laravel-form-validation 
 
# Yarn 
yarn add laravel-form-validation

Usage

Using Vue.js and Bootstrap

<template>
    <form @submit.prevent="submit">
 
        <!-- Display a global message if there is 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('name') }"
                    @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 upload progress percentage using form.$progress -->
        <div class="progress">
            <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(data => {
                    // This is the data returned from your server
                    console.log(data);
                })
                .catch(error => {
                    // Handle errors
                });
        }
    }
}
</script> 

API

You can take a look at individual classes and their methods

Customize axios instance

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

// app.js
import axios from 'axios';
import Form from 'laravel-form-validation';
 
axios.defaults.headers.common['X-CSRF-TOKEN'] = window.Laravel.csrfToken;
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
Form.$defaults.axios = axios;

Attribution

This package is highly inspired by various other similar implementations:

Testing

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

License

MIT License

install

npm i laravel-form-validation

Downloadsweekly downloads

2

version

0.1.1

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability