Form validation new + RFC

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>

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>

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>

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>

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>

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>

docs/src/pages/vue-components/form-validation.md

@@ -1,83 +1,30 @@
 ---
-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>
+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.
 
-| 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
-:::
+## Usage
+<doc-example title="Basic Usage" file="FormValidation/Required" />
+<doc-example title="Maximum Length" file="FormValidation/MaxLength" />
 
-::: warning CUSTOM TITLE
-Some tip
-:::
+If you set `lazy-rules`, validation starts after first blur.
+<doc-example title="Lazy Rules" file="FormValidation/Lazy" />
 
-* Something
-  * something
-  * else
-* Back
-  * wee
+## External Validation
+You can also use external validation and only pass `error` and `error-message` (enable `bottom-slots` to display this error message)
 
-## Installation
-<doc-installation components="QBtn" :plugins="['Meta', 'Cookies']" directives="Ripple" :config="{ notify: 'Notify' }" />
+<doc-example title="External" file="FormValidation/External" />
 
-## Usage
-<doc-example title="Standard" file="QBtn/Standard" />
+You can also customize the slot for error message
+<doc-example title="Slot for error message" file="FormValidation/Slots" />
 
-## API
-<doc-api file="QTh" />