From 5e8a5f27ae9a309cd119ec8c3ae9f52acdfa0b81 Mon Sep 17 00:00:00 2001
From: panstromek <panstromek@seznam.cz>
Date: Sat, 19 Jan 2019 23:44:08 +0100
Subject: [PATCH 1/2] form validation scaffolding

---
 docs/src/examples/FormValidation/Standard.vue | 106 ++++++++++++++++++
 .../pages/vue-components/form-validation.md   |  97 +++-------------
 2 files changed, 124 insertions(+), 79 deletions(-)
 create mode 100644 docs/src/examples/FormValidation/Standard.vue

diff --git a/docs/src/examples/FormValidation/Standard.vue b/docs/src/examples/FormValidation/Standard.vue
new file mode 100644
index 00000000000..17deb19aa68
--- /dev/null
+++ b/docs/src/examples/FormValidation/Standard.vue
@@ -0,0 +1,106 @@
+<template>
+  <div class="q-pa-md q-gutter-sm">
+    <div class="text-h6">
+      Internal validation
+      <q-btn label="Reset" @click="reset" color="primary" flat/>
+    </div>
+
+    <q-input
+      ref="input1"
+      v-bind="{[type]: true}"
+      v-model="model1"
+      label="Label *"
+      :rules="[
+          val => !!val || '* Required'
+        ]"
+    />
+
+    <q-input
+      ref="input2"
+      v-bind="{[type]: true}"
+      v-model="model2"
+      label="len <= 3"
+      counter
+      hint="Type something"
+      :rules="[
+          val => val.length <= 3 || 'Please use maximum 3 characters'
+        ]"
+    >
+      <q-icon slot="append" name="close" @click="model2 = ''" class="cursor-pointer"/>
+    </q-input>
+
+    <q-input
+      ref="input3"
+      v-bind="{[type]: true}"
+      v-model="model3"
+      label="Required, Lazy, Len < 2"
+      counter
+      hint="Validation starts after first blur"
+      :rules="[
+          val => !!val || '* Required',
+          val => val.length < 2 || 'Please use maximum 1 character',
+        ]"
+      lazy-rules
+    />
+
+    <div class="text-h6 q-mt-xl">External validation</div>
+    <div class="q-gutter-sm">
+      <q-toggle v-model="error" label="Error state"/>
+      <q-radio v-model="errorMessage" val="First error" label="First error"/>
+      <q-radio v-model="errorMessage" val="Second error" label="Second error"/>
+    </div>
+    <q-input
+      ref="inputExternal"
+      v-bind="{[type]: true}"
+      v-model="modelExternal"
+      label="Label"
+      hint="Hint"
+      :error="error"
+      :error-message="errorMessage"
+    />
+
+    <q-input
+      ref="inputExternal"
+      v-bind="{[type]: true}"
+      v-model="modelExternal"
+      label="Label"
+      hint="Hint"
+      :error="error"
+      style="margin-bottom: 30px"
+    >
+      <div slot="error">Slotted error message</div>
+      <div slot="error">Second slotted error message</div>
+    </q-input>
+  </div>
+
+</template>
+
+<script>
+export default {
+  data () {
+    const n = 3
+
+    const data = {
+      n,
+      type: 'filled',
+      modelExternal: '',
+      error: false,
+      errorMessage: 'First error'
+    }
+
+    for (let i = 1; i <= n; i++) {
+      data['model' + i] = ''
+    }
+
+    return data
+  },
+
+  methods: {
+    reset () {
+      for (let i = 1; i <= this.n; i++) {
+        this.$refs['input' + i].resetValidation()
+      }
+    }
+  }
+}
+</script>
diff --git a/docs/src/pages/vue-components/form-validation.md b/docs/src/pages/vue-components/form-validation.md
index 1ab35aeb301..397419c6e4a 100644
--- a/docs/src/pages/vue-components/form-validation.md
+++ b/docs/src/pages/vue-components/form-validation.md
@@ -1,83 +1,22 @@
 ---
-title: Docs
+title: Form Validation
 ---
-
-[Internal Link](/docs), [External Link](https://vuejs.org)
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non laoreet eros. `token` Morbi non ipsum ac purus dignissim rutrum. Nulla nec ante congue, rutrum tortor facilisis, aliquet ligula. Fusce vitae odio elit. `/quasar.conf.js`
-
-## Heading 2
-### Heading 3
-#### Heading 4
-##### Heading 5
-###### Heading 6
-
-```
-const m = 'lala'
-```
-
-```html
-<div>
-  <q-btn @click="doSomething">Do something</q-btn>
-  <q-icon name="alarm" />
-</div>
-```
-
-```vue
-<template>
-  <!-- you define your Vue template here -->
-</template>
-
-<script>
-// This is where your Javascript goes
-// to define your Vue component, which
-// can be a Layout, a Page or your own
-// component used throughout the app.
-
-export default {
-  //
-}
-</script>
-
-<style>
-/* This is where your CSS goes */
-</style>
-```
-
-| Table Example | Type | Description |
-| --- | --- | --- |
-| infinite | Boolean | Infinite slides scrolling |
-| size | String | Thickness of loading bar. |
-
-> Something...
-
-::: tip
-Some tip
-:::
-
-::: warning
-Some tip
-:::
-
-::: danger
-Some tip
-:::
-
-::: warning CUSTOM TITLE
-Some tip
-:::
-
-* Something
-  * something
-  * else
-* Back
-  * wee
-
-## Installation
-<doc-installation components="QBtn" :plugins="['Meta', 'Cookies']" directives="Ripple" :config="{ notify: 'Notify' }" />
+You can validate input components with `:rules` prop. Specify array of embedded rules or your own validators. Your custom validator will be a function which returns `true` if validator succeeds or `String` with error message if it doesn't succeed.
 
 ## Usage
-<doc-example title="Standard" file="QBtn/Standard" />
-
-## API
-<doc-api file="QTh" />
+<doc-example title="Basic Usage" file="FormValidation/Standard" />
+
+## Embedded rules
+`date`,
+`time`,
+`fulltime`,
+`timeOrFulltime`,
+`hexColor`,
+`hexaColor`,
+`hexOrHexaColor`,
+`rgbColor`,
+`rgbaColor`,
+`rgbOrRgbaColor`,
+`hexOrRgbColor`,
+`hexaOrRgbaColor`,
+`anyColor`,

From 80ff6bdfbf57bb7ee440608b02343f2a1e733b5a Mon Sep 17 00:00:00 2001
From: panstromek <panstromek@seznam.cz>
Date: Sun, 20 Jan 2019 16:23:45 +0100
Subject: [PATCH 2/2] form validation first iter. finished

---
 docs/src/examples/FormValidation/External.vue | 28 +++++++++++++
 docs/src/examples/FormValidation/Lazy.vue     | 33 +++++++++++++++
 .../src/examples/FormValidation/MaxLength.vue | 27 +++++++++++++
 docs/src/examples/FormValidation/Required.vue | 27 +++++++++++++
 docs/src/examples/FormValidation/Slots.vue    | 30 ++++++++++++++
 .../pages/vue-components/form-validation.md   | 40 +++++++++++--------
 6 files changed, 169 insertions(+), 16 deletions(-)
 create mode 100644 docs/src/examples/FormValidation/External.vue
 create mode 100644 docs/src/examples/FormValidation/Lazy.vue
 create mode 100644 docs/src/examples/FormValidation/MaxLength.vue
 create mode 100644 docs/src/examples/FormValidation/Required.vue
 create mode 100644 docs/src/examples/FormValidation/Slots.vue

diff --git a/docs/src/examples/FormValidation/External.vue b/docs/src/examples/FormValidation/External.vue
new file mode 100644
index 00000000000..cc6b7de3459
--- /dev/null
+++ b/docs/src/examples/FormValidation/External.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="q-pa-md q-gutter-sm">
+    <q-input
+      ref="input"
+      filled
+      v-model="model"
+      label="Type here"
+      bottom-slots
+      error-message="Please use maximum 3 characters"
+      :error="!isValid"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      model: ''
+    }
+  },
+  computed: {
+    isValid () {
+      return this.model.length <= 3
+    }
+  }
+}
+</script>
diff --git a/docs/src/examples/FormValidation/Lazy.vue b/docs/src/examples/FormValidation/Lazy.vue
new file mode 100644
index 00000000000..da3a2d1bdef
--- /dev/null
+++ b/docs/src/examples/FormValidation/Lazy.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="q-pa-md q-gutter-sm">
+    <q-input
+      ref="input"
+      filled
+      v-model="model"
+      label="Required field with length < 2"
+      hint="Validation starts after first blur"
+      counter
+      :rules="[
+          val => !!val || '* Required',
+          val => val.length < 2 || 'Please use maximum 1 character',
+        ]"
+      lazy-rules
+    />
+    <q-btn label="Reset" @click="reset" color="primary"/>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      model: ''
+    }
+  },
+  methods: {
+    reset () {
+      this.$refs.input.resetValidation()
+    }
+  }
+}
+</script>
diff --git a/docs/src/examples/FormValidation/MaxLength.vue b/docs/src/examples/FormValidation/MaxLength.vue
new file mode 100644
index 00000000000..c70774811ac
--- /dev/null
+++ b/docs/src/examples/FormValidation/MaxLength.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="q-pa-md q-gutter-sm">
+    <q-input
+      ref="input"
+      filled
+      v-model="model"
+      label="Maximum 3 characters"
+      :rules="[ val => val.length <= 3 || 'Please use maximum 3 characters']"
+    />
+    <q-btn label="Reset" @click="reset" color="primary"/>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      model: ''
+    }
+  },
+  methods: {
+    reset () {
+      this.$refs.input.resetValidation()
+    }
+  }
+}
+</script>
diff --git a/docs/src/examples/FormValidation/Required.vue b/docs/src/examples/FormValidation/Required.vue
new file mode 100644
index 00000000000..bbfd3e73525
--- /dev/null
+++ b/docs/src/examples/FormValidation/Required.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="q-pa-md q-gutter-sm">
+    <q-input
+      ref="input"
+      filled
+      v-model="model"
+      label="Required Field"
+      :rules="[val => !!val || 'Field is required']"
+    />
+    <q-btn label="Reset" @click="reset" color="primary"/>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      model: ''
+    }
+  },
+  methods: {
+    reset () {
+      this.$refs.input.resetValidation()
+    }
+  }
+}
+</script>
diff --git a/docs/src/examples/FormValidation/Slots.vue b/docs/src/examples/FormValidation/Slots.vue
new file mode 100644
index 00000000000..367abebc188
--- /dev/null
+++ b/docs/src/examples/FormValidation/Slots.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="q-pa-lg">
+    <q-input
+      ref="input"
+      filled
+      v-model="model"
+      label="Type here"
+      bottom-slots
+      :error="!isValid">
+      <div slot="error">
+        Please use maximum 3 characters.
+      </div>
+    </q-input>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      model: ''
+    }
+  },
+  computed: {
+    isValid () {
+      return this.model.length <= 3
+    }
+  }
+}
+</script>
diff --git a/docs/src/pages/vue-components/form-validation.md b/docs/src/pages/vue-components/form-validation.md
index 397419c6e4a..90f0f64525a 100644
--- a/docs/src/pages/vue-components/form-validation.md
+++ b/docs/src/pages/vue-components/form-validation.md
@@ -1,22 +1,30 @@
 ---
 title: Form Validation
 ---
-You can validate input components with `:rules` prop. Specify array of embedded rules or your own validators. Your custom validator will be a function which returns `true` if validator succeeds or `String` with error message if it doesn't succeed.
+You can validate input components with `:rules` prop. Specify array of embedded rules or your own validators. Your custom validator will be a function which returns `true` if validator succeeds or `String` with error message if it doesn't succeed. 
+
+This is so you can write convenient rules of shape like:
+```js
+value => condition || errorMessage
+ ```
+For example:
+ ```js
+value => value.includes('Hello') || 'Field must contain word Hello'
+```
+You can reset the validation by calling `resetValidation()` method on the input.
 
 ## Usage
-<doc-example title="Basic Usage" file="FormValidation/Standard" />
+<doc-example title="Basic Usage" file="FormValidation/Required" />
+<doc-example title="Maximum Length" file="FormValidation/MaxLength" />
+
+If you set `lazy-rules`, validation starts after first blur.
+<doc-example title="Lazy Rules" file="FormValidation/Lazy" />
+
+## External Validation
+You can also use external validation and only pass `error` and `error-message` (enable `bottom-slots` to display this error message)
+
+<doc-example title="External" file="FormValidation/External" />
+
+You can also customize the slot for error message
+<doc-example title="Slot for error message" file="FormValidation/Slots" />
 
-## Embedded rules
-`date`,
-`time`,
-`fulltime`,
-`timeOrFulltime`,
-`hexColor`,
-`hexaColor`,
-`hexOrHexaColor`,
-`rgbColor`,
-`rgbaColor`,
-`rgbOrRgbaColor`,
-`hexOrRgbColor`,
-`hexaOrRgbaColor`,
-`anyColor`,