Skip to content

Commit

Permalink
Add example of delayed $touch
Browse files Browse the repository at this point in the history
  • Loading branch information
Frizi committed Jan 22, 2017
1 parent d990854 commit 5502b0c
Show file tree
Hide file tree
Showing 3 changed files with 53 additions and 0 deletions.
44 changes: 44 additions & 0 deletions docs/partials/examples/ExampleDelayedTouch.vue
@@ -0,0 +1,44 @@
<template lang="pug">
div
.form-group(v-bind:class="{ 'form-group--error': $v.name.$error }")
label.form__label Name
input.form__input(v-model.trim="name" @input="delayTouch($v.name)")
span.form-group__message(v-if="!$v.name.required") Field is required
span.form-group__message(v-if="!$v.name.minLength")
| Name must have at least {{$v.name.$params.minLength.min}} letters.
span.form-group__message(v-if="!$v.name.maxLength")
| Name must have at most {{$v.name.$params.maxLength.max}} letters.

pre
| name: {{ $v.name }}
</template>

<script>
import { required, minLength, maxLength } from 'vuelidate/lib/validators'
const touchMap = new WeakMap()
export default {
data () {
return {
name: ''
}
},
validations: {
name: {
required,
minLength: minLength(4),
maxLength: maxLength(15)
}
},
methods: {
delayTouch ($v) {
$v.$reset()
if (touchMap.has($v)) {
clearTimeout(touchMap.get($v))
}
touchMap.set($v, setTimeout($v.$touch, 1000))
}
}
}
</script>
8 changes: 8 additions & 0 deletions docs/partials/examples/_examples.pug
Expand Up @@ -55,3 +55,11 @@
return Boolean(await response.json())
}
}

+subsection('Delayed validation errors')
p.typo__p
| You can do anything you need with the $touch state, no matter how fancy your requirements are.
| It all boils down to calling $touch and $reset in the right moment. As an example of that,
| here is an easy to follow implementation of delayed error based on custom <kbd>setTimeout</kbd> logic.
| It triggers one second after last input.
+example('ExampleDelayedTouch')
1 change: 1 addition & 0 deletions docs/partials/examples/index.js
@@ -1,5 +1,6 @@
export ExampleAsync from './ExampleAsync'
export ExampleBasic from './ExampleBasic'
export ExampleDelayedTouch from './ExampleDelayedTouch'
export ExampleEachArray from './ExampleEachArray'
export ExampleNested from './ExampleNested'
export ExampleRepeatPassword from './ExampleRepeatPassword'
Expand Down

0 comments on commit 5502b0c

Please sign in to comment.