This package ships a Vue 3 composable that exposes the clockwork error bag to the component template. All the validation is still handled by the clockwork library, so make sure to check the full documentation to benefit from all its features (built-in rules, custom rules, etc...)
npm install @elieandraos/clockwork @elieandraos/clockwork-vue --save
The composable adds a reactive variable $errors
to the component state.
It should be filled with the clockwork error bag when the validation fails.
It also exposes 3 methods to the component template
getErrors(key=null)
return all the error messages or all the error messages ofkey
if specifiedgetFirstError(key=null)
return the first error message found or the first error message ofkey
if specifiedhasErrors(key=null)
checks if there is any validation error or any validation error for thekey
if specified
<script setup>
import Clockwork from '@elieandraos/clockwork'
import { useClockwork } from '@elieandraos/clockwork-vue'
const validator = new Clockwork()
const { $errors, hasErrors, getFirstError, getErrors } = useClockwork()
// ...
if( validator.fails())
$errors.value = validator.getErrorBag()
</script>
<script setup>
import { reactive, toRaw, toRefs } from 'vue'
import Clockwork from '@elieandraos/clockwork'
import { useClockwork } from '@elieandraos/clockwork-vue'
const validator = new Clockwork()
const { $errors, hasErrors, getFirstError, getErrors } = useClockwork()
const state = reactive({
name: null,
email: null,
})
const validate = () => {
validator
.setData( toRaw(state) )
.setRules({
name: 'required',
email: 'required | email',
})
if (validator.passes()) {
// ...
} else {
// fill the $errors with the error bag
$errors.value = validator.getErrorBag()
}
}
</script>
<template>
<input type="text" v-model="name" />
<div v-if="hasErrors('name')">{{ getFirstError('name') }}</div>
<input type="text" v-model="email" />
<div v-if="hasErrors('email')">{{ getFirstError('email') }}</div>
<button @click="validate">submit</button>
</template>