vue-vform
v1.0.4
Published
Vue.js 2 form component that integrates jQuery Validation and Axios.
Downloads
38
Maintainers
Readme
vue-vform
Vue.js 2 form component that integrates jQuery Validation and Axios.
Install
yarn add vue-vform --dev
npm install vue-vform --save-dev
Prerequisites
- Vue.js 2
- jQuery
- jQuery Validation
- Axios (optional if you want to send (automatically) an Ajax request after validation)
Usage
Define vform
component markup inside your custom component.
For example in your custom-form-component.vue
:
<template>
<vform
request
:params="user"
method="post"
action="/api/v1/user/add"
@validate="mySubmitCallback">
<!-- Your cool stuff -->
<div class="form-group">
<label for="txtname">Name</label>
<input
name="txtname"
v-model="user.name"
required
data-msg-required="Enter your name"
type="text" class="form-control">
</div>
<div class="form-group">
<label for="txtemail">E-mail</label>
<input
name="txtemail"
v-model="user.email"
required
data-msg-required="Enter your E-mail"
data-rule-email="true"
data-msg-email="Enter a valid E-mail address"
type="text" class="form-control">
</div>
<!-- //Your cool stuff -->
<button type="submit" class="btn btn-primary">Submit</button>
</vform>
</template>
<script>
export default {
data () {
return {
user: {
name: '',
email: ''
}
}
},
methods: {
/**
* Callback method when validation is completed.
*/
mySubmitCallback (promise) {
promise
.then(response => response.data)
.then(data => console.log(data))
.catch(err => console.log(err.message))
}
}
}
</script>
In your entry app:
const Vue = require('vue')
// jQuery and jQuery Validation
window.$ = window.jQuery = require('jquery')
require('jquery-validation')
// If you want auto form Ajax request (optional)
window.axios = require('axios')
Vue.component('vform', require('vue-vform'))
Vue.component('custom-form-component', require('./components/custom-form-component'))
const app = new Vue({
el: '#app'
})
Attributes
method (optional)
The request method (POST, PUT, DELETE, PATCH). For dynamic value use v-bind:method="myMethod"
or :method="myMethod"
.
action (optional)
The request URL.
request (optional)
If request
(Boolean) attribute is defined vform
performs an Ajax Request using Axios and a Promise object is passed to your callback. Make sure that you have Axios before.
params (optional)
The component data binding (usually FormData
or plain object {}
values) that it will send if request
option was setted. (use v-bind:param="mydata"
or :param="mydata"
property)
accept (optional)
The request Accept
header. Default: application/json
Events
@validate
Event when validation is completed. You need to pass the callback defined in your methods: ...
. A Promise object will be passed if request
attribute was defined.
Tip
Laravel v5.4 users: It's necessary to define the Axios common headers in your app.js
file. That's is useful when your use Laravel v5.4 and Passport.
axios.defaults.headers.common = {
'Accept': 'application/json',
'X-Requested-With': 'XMLHttpRequest',
'X-CSRF-TOKEN': Laravel.csrfToken
}
License
MIT license
© 2017 José Luis Quintana