vue2-form-validate

Form validation for Vue.js 2.2+

Install

Available through npm as vue2-form-validate.

import KenryForm from 'vue2-form-validate';
// or var KenryForm = require('kenry-form') or window.KenryForm if you are linking directly to the dist file

// install globally
Vue.use(KenryForm);
Vue.use(KenryForm, options);


### Usage

Once installed you have access to four components (`vue2-form-validate`, `validate`) for managing form state, validating form fields and displaying validation messages.


Example

```html
<div id="app">
  <kform :state="formstate" @submit.prevent="onSubmit">
      <span>Name *</span>
      <input v-model="model.name" required minlength="3" name="name" />
    <button type="submit">Submit</button>
  </kform>
  <pre>{{ formstate }}</pre>
</div>

Vue.use(KenryForm);

new Vue({
  el: '#app',
  data: {
    //formstate:{}
    formstate: {
       messages: {
                    required: 'This field is required'
                 },
                isFieldColor: false // default = true, set false is not set border color for the input field. 
    },
    model: {
      name: '',
      email: 'invalid-email'
    }
  },
  methods: {
    onSubmit: function () {
      if(this.formstate.$invalid) {
        // alert user and exit early
        return;
      }
      // otherwise submit form
    }
  }
});

The output of formstate will be:

{
  "$dirty": false,
  "$pristine": true,
  "$valid": false,
  "$invalid": true,
  "$submitted": false,
  "$touched": false,
  "$untouched": true,
  "$focused": false,
  "$pending": false,
  "$error": {
    // fields with errors are copied into this object
  },
  "$submittedState": {
    // each form sumbit, state is cloned into this object
  },
  "name": {
    "$name": "name",
    "$dirty": false,
    "$pristine": true,
    "$valid": false,
    "$invalid": true,
    "$touched": false,
    "$untouched": true,
    "$focused": false,
    "$pending": false,
    "$error": {
      "required": true
    }
  },
  "email": {
    "$name": "email",
    "$dirty": false,
    "$pristine": true,
    "$valid": false,
    "$invalid": true,
    "$touched": false,
    "$untouched": true,
    "$focused": false,
    "$pending": false,
    "$error": {
      "email": true
    }
  }
}

kenry-form

• state Object on which form state is set
• tag String, defaults to form
• show-messages String, applies to all child field-messages, show errors dependant on form field state e.g. $touched, $dirty || $touched, '$touched || $submitted'

validate

• state Optional way of passing in the form state. If omitted form state will be found in the $parent
• custom Object containing one or many custom validators. {validatorName: validatorFunction}
• tag String which specifies what element tag should be rendered by the validate component, defaults to span

field-messages

• state Optional way of passing in the form state. If omitted form state will be found in the $parent
• name String which specifies the related field name
• tag String, defaults to div
• show String, show error dependant on form field state e.g. $touched, $dirty || $touched, '$touched || $submitted'
• auto-label Boolean, defaults to false. Automatically set the for attribute of labels found inside the field-messages component

field

• tag String, defaults to div
• auto-label Boolean, defaults to true. Automatically set for and id attributes of label and input elements found inside the validate component

Config

Set config options when using Vue.use(KenryForm, options), or when using a mixin mixins: [new KenryForm(options)] defaults:

let options = {
   kMessages: {
       required: 'system is required'
   },
   validators: { // custom validator
      functions: {
           'upper-character': function(value, attrValue, vnode) {
                return value === value.toLocaleUpperCase();
            }
        },
        messages: { // custom message
            'upper-character': 'This field must be capital letter'
        }
    },
    isFieldColor: true,
    isAllowMessage: true
};
{
    validators: {},
    formComponent: 'kenryForm',
    formTag: 'form',
    fieldComponent: 'field',
    isFieldColor:true,
    isAllowMessage:true,
    Promise: typeof Promise === 'function' ? Promise : null
}