vue-js-form-helper

This is a small library that makes form submit and validation easier to use.

Installation

npm i vue-js-form-helper

Code Example

The following code will show how to use it with Vue.js

html

<div id="app">
    <form @submit.prevent="onSubmit" @keydown="form.errors.clear()">
 
        <div>
            <input type="text" v-model="form.name" name="name">
            <span v-if="form.errors.has('name')" v-text="form.errors.get('name')"></span>
        </div>
 
        <div>
            <input type="text" v-model="form.email" name="email">
            <span v-if="form.errors.has('email')" v-text="form.errors.get('email')"></span>
        </div>
        
        <button :disabled="form.errors.any()">Submit</button>
    </form>
</div>

app.js

import axois from 'axios';
import Form from 'vue-js-form-helper';
import Vue from 'vue';
 
var app = new Vue({
 
    el: "#app",
 
    data: {
 
        form: new Form({ 
            name: '',
            email: ''
        })
 
    },
 
    methods: {
        onSubmit() {
 
            this.form.submit('post', '{url}')
            .then(response => console.log('Success'))
            .catch(error => console.log('Error'));
 
        }
    }
 
});

Authors and acknowledgment

Jeffrey Way

Licence

MIT License