Added vee-validate example (#1889)

toadkicker · mosinve · commit b2fedf154a4f · 2018-06-16T17:50:14.000+07:00
* Added vee-validate example

Added example for vee-validate and fixed example for vuelidate state property

* validateState method that was missing
diff --git a/docs/markdown/reference/validation/README.md b/docs/markdown/reference/validation/README.md
@@ -21,7 +21,7 @@ This is a verbose example designed to show how Bootstrap-Vue and Vuelidate inter
       <b-form-input id="exampleInput1"
                     type="text"
                     v-model="form.name"
-                    :state="!$v.form.name.$invalid"
+                    :state="$v.form.name.$dirty ? !$v.name.$error : null"
                     aria-describedby="input1LiveFeedback"
                     placeholder="Enter name" />
       <b-form-invalid-feedback id="input1LiveFeedback">
@@ -33,7 +33,7 @@ This is a verbose example designed to show how Bootstrap-Vue and Vuelidate inter
                   label-for="exampleInput2">
       <b-form-select id="exampleInput2"
                      :options="foods"
-                     :state="!$v.form.food.$invalid"
+                       :state="$v.form.food.$dirty ? !$v.name.$error : null"
                      v-model="form.food" />
       <b-form-invalid-feedback id="input2LiveFeedback">
         This is a required field
@@ -86,3 +86,77 @@ This is a verbose example designed to show how Bootstrap-Vue and Vuelidate inter
 
 <!-- form-validation-1.vue -->
 ```
+
+## vee-validate
+
+[vee-validate](https://github.com/baianat/vee-validate) is a plugin for Vue.js that allows you to validate input fields and display errors. It has full support for `vue-i18n` and provides fairly good out of the box error messages.
+
+Same example as above just modified for vee-validate:
+
+```html
+<template>
+  <b-form @submit="onSubmit">
+    <b-form-group id="exampleInputGroup1"
+                  label="Name"
+                  label-for="exampleInput1">
+      <b-form-input id="exampleInput1"
+                    type="text"
+                    v-model="form.name"
+                    v-validate="{required: true, min:2}"
+                    :state="validateState('form.name')"
+                    aria-describedby="input1LiveFeedback"
+                    placeholder="Enter name" />
+      <b-form-invalid-feedback id="input1LiveFeedback">
+        This is a required field and must be at least 3 characters
+      </b-form-invalid-feedback>
+    </b-form-group>
+    <b-form-group id="exampleInputGroup2"
+                  label="Food"
+                  label-for="exampleInput2">
+      <b-form-select id="exampleInput2"
+                     :options="foods"
+                     v-validate="{required: true}"
+                     :state="validateState('form.foods')"
+                     v-model="form.food" />
+      <b-form-invalid-feedback id="input2LiveFeedback">
+        This is a required field
+      </b-form-invalid-feedback>
+    </b-form-group>
+    <b-button type="submit"
+              variant="primary"
+              :disabled="form.errors.any()">
+      Submit
+    </b-button>
+  </b-form>  
+</template>
+
+<script>
+  
+  export default {
+    name: "myForm",
+    data() {
+      return {
+        foods: [
+          "apple",
+          "orange"
+        ],
+        form: {}
+      }
+    },
+    methods: {
+      onSubmit() {
+        // form submit logic
+      },
+      validateState(ref) {
+        if (this.fields[ref] && this.fields[ref].dirty) {
+          return !this.errors.has(ref)
+        }
+        return null
+      },
+    }
+  }
+</script>
+
+<!-- form-validation-1.vue -->
+```
+
