try-vue: add some examples of validataion via veevalidate

src/main/resources/static/index.html

@@ -24,9 +24,12 @@
 <script type="application/javascript" src="/webjars/vuex/3.1.0/dist/vuex.min.js"></script>
 <script type="application/javascript" src="/webjars/vue-router/3.0.2/dist/vue-router.min.js"></script>
 <script type="application/javascript" src="/webjars/vue-multiselect/2.0.2/dist/vue-multiselect.min.js"></script>
+<script type="application/javascript" src="/webjars/vee-validate/2.1.7/dist/vee-validate.js"></script>
 <script type="application/javascript" src="/webjars/moment/2.24.0/moment.js"></script>
 <script type="application/javascript" src="/webjars/http-vue-loader/1.3.5/src/httpVueLoader.js"></script>
 <script type="application/javascript" src="/webjars/axios/0.18.0/dist/axios.min.js"></script>
+<script type="application/javascript" src="/webjars/jquery/3.0.0/jquery.min.js"></script>
+<script type="application/javascript" src="/webjars/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
 <script type="application/javascript" src="/js/app-config.js?v=@@timestamp"></script>
 <script type="application/javascript" src="/js/app-vue-loader.js?v=@@timestamp"></script>
 <script type="application/javascript" src="/js/app-axios.js?v=@@timestamp"></script>

src/main/resources/static/js/app.js

@@ -1,4 +1,4 @@
-/* global Vue, VueRouter, Vuex, httpVueLoaderEx */
+/* global Vue, VueRouter, Vuex, VeeValidate, httpVueLoaderEx */
 
 var router = new VueRouter({
     linkActiveClass: "active",
@@ -64,6 +64,9 @@ var store = new Vuex.Store({
     }
 });
 
+Vue.use(VeeValidate, {
+    validity: true
+});
 new Vue({
     el: "#ng-tracker-app",
     router: router,

src/main/resources/static/other/other.vue

@@ -1,5 +1,30 @@
 <template>
     <div>
+        <ul class="nav nav-tabs" role="tablist">
+            <li class="nav-item">
+                <a class="nav-link active" data-toggle="tab" href="#var1">Вариант 1</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" data-toggle="tab" href="#var2">Вариант 2</a>
+            </li>
+        </ul>
 
+        <div class="tab-content">
+            <div class="tab-pane show active" id="var1">
+                <validate-var1></validate-var1>
+            </div>
+            <div class="tab-pane fade" id="var2">
+                <validate-var2></validate-var2>
+            </div>
+        </div>
     </div>
-</template>
+</template>
+
+<script>
+    module.exports = {
+        components: {
+            "validate-var1": httpVueLoaderEx("/other/var1.vue"),
+            "validate-var2": httpVueLoaderEx("/other/var2.vue")
+        }
+    }
+</script>

src/main/resources/static/other/var1.vue

@@ -0,0 +1,81 @@
+<template>
+    <form
+            id="app1"
+            @submit.prevent="checkForm"
+            method="post">
+
+        <p v-if="errors.length">
+            <b>Пожалуйста исправьте указанные ошибки:</b>
+        <ul>
+            <li v-for="group in errors.collect()">
+                <ul>
+                    <li v-for="error in group">{{ error }}</li>
+                </ul>
+            </li>
+        </ul>
+        </p>
+
+        <p>
+            <label for="name1">Имя нового продукта: </label>
+            <input
+                    id="name1"
+                    v-model="name"
+                    type="text"
+                    name="name"
+                    v-validate="nameValidator">
+            <br>
+            <label for="count1">Количество нового продукта: </label>
+            <input
+                    id="count1"
+                    v-model="count"
+                    type="number"
+                    name="count"
+                    v-validate="countValidator">
+        </p>
+
+        <p>
+            <input
+                    type="submit"
+                    value="Отправить">
+        </p>
+
+    </form>
+</template>
+
+<script>
+    module.exports = {
+        data: function () {
+            return {
+                name: '',
+                nameValidator: {
+                    required: true,
+                    min: 6
+                },
+                count: 0,
+                countValidator: {
+                    required: true,
+                    min_value: 1,
+                    max_value: 1024
+                }
+            };
+        },
+        methods: {
+            checkForm: function (e) {
+                this.$validator.validate().then(function (valid) {
+                    if (valid) {
+                        alert("Good!");
+                    }
+                });
+            }
+        },
+        mounted: function () {
+            this.$validator.validate();
+        }
+    };
+</script>
+
+<style>
+    input:invalid {
+        background-color: red;
+    }
+</style>

src/main/resources/static/other/var2.vue

@@ -0,0 +1,78 @@
+<template>
+    <form
+            id="app2"
+            @submit.prevent="checkForm"
+            method="post">
+
+        <p v-if="errors.length">
+            <b>Пожалуйста исправьте указанные ошибки:</b>
+        <ul>
+            <li v-for="group in errors.collect()">
+                <ul>
+                    <li v-for="error in group">{{ error }}</li>
+                </ul>
+            </li>
+        </ul>
+        </p>
+
+        <p>
+            <label for="name2">Имя нового продукта: </label>
+            <input
+                    id="name2"
+                    v-model="name"
+                    type="text"
+                    name="name"
+                    required
+                    minlength="6"
+                    v-validate>
+            <br>
+            <label for="count2">Количество нового продукта: </label>
+            <input
+                    id="count2"
+                    v-model="count"
+                    type="number"
+                    name="count"
+                    required
+                    min="1"
+                    max="1024"
+                    v-validate>
+        </p>
+
+        <p>
+            <input
+                    type="submit"
+                    value="Отправить">
+        </p>
+
+    </form>
+
+</template>
+
+<script>
+    module.exports = {
+        data: function () {
+            return {
+                name: '',
+                count: 0
+            };
+        },
+        methods: {
+            checkForm: function (e) {
+                this.$validator.validate().then(function (valid) {
+                    if (valid) {
+                        alert("Good!");
+                    }
+                });
+            }
+        },
+        mounted: function () {
+            this.$validator.validate();
+        }
+    };
+</script>
+
+<style>
+    input:invalid {
+        background-color: red;
+    }
+</style>