joseluisq/vue-vform

Vue.js 2 form component that integrates jQuery Validation and Axios.

vue-vform

Vue.js 2 form component that integrates jQuery Validation and Axios.

Install

Yarn

yarn add vue-vform --dev

NPM

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