Vue Form Send

A Vue.js directive for sending data from form and primitive validation inputs

Installation

npm i --save-dev vue-form-send

import VueFormSend from 'vue-form-send'

Vue.use(VueFormSend)

SSR (Nuxt.js)

import VueFormSend from 'vue-form-send/dist/ssr.index'

Vue.use(VueFormSend)

Usage

<form v-form-send='{success: successResult, fail: failResult}' class='form' action='./send.php' method='post'>
  <input v-form-input='{length: 5}' name='phone' type='text' placeholder='Length > 5'/>
  <input v-form-input='{length: 5, replace: ["-", "/"]}' name='phone' type='text' placeholder='Length > 5 and replace'/>
  <input v-form-input='{length: 5, clean: true}' name='phone' type='text' placeholder='Length > 5 and clear'/>
  <input v-form-input='{length: 5, timeoutError: 0, changeValidation: true}' name='phone' type='text' placeholder='Length > 5 and timeoutErorr 0'/>
  <input v-form-input='{length: 5, changeValidation: true}' name='phone' type='text' placeholder='Length > 5 and changeValidation'/>
  <input v-form-input='{type: "checked"}' name='phone' type='checkbox'/> 
  <button>Send</button>
</form>

Directive options

Form

| Option | Value type | Description | | ------ | ------ | ------ | | pressButton | Function | Call function after click to form button | | success | Function | Call function after success send data | | fail | Function | Call function is fail validation or send data | | credentials | Boolean | Use credentials | auth | Function -> {type: String, data: String} | User auth. Return object with auth type and data string format username:password

Element

| Option | Value type | Description | | ------ | ------ | ------ | | length | Integer | Check length value of element | | replace | Boolean | Replacing symbols from text value | | clear | Boolean | Clear value after success send data | | timeoutError | Integer | Timeout for remove error class | | changeValidation | Boolean | Real-time validaton if change input value | | type | String | Types of verification (length of checked). Default - length. |