Displaying errors
Regle is a headless library, so you can display your errors message however you want. You can also trigger classes or beahviour depending of the internal regle
state.
Showing errors messages
You can display your errors by iterating though errors.xxx
, xxx
being the field you need to check.
You can also access regle.xxx.$errors
or regle.xxx.$silentErrors
.
App.vue
vue
<template>
<input v-model='state.email' placeholder='Type your email'/>
<ul>
<li v-for="error of errors.email" :key='error'>
{{ error }}
</li>
</ul>
</template>
<script setup lang='ts'>
import {useRegle} from '@regle/core';
import {required, minLength, email} from '@regle/rules';
const {errors, state} = useRegle({email: ''}, {
email: {required, minLength: minLength(4), email}
})
</script>
Result:
Applying an error and valid class
App.vue
vue
<template>
<input
:class="{
error: regle.$fields.email.$error,
valid: regle.$fields.email.$valid
}"
v-model='state.email'
placeholder='Type your email'/>
<ul>
<li v-for="error of errors.email" :key='error'>
{{ error }}
</li>
</ul>
</template>
<script setup lang='ts'>
import {useRegle} from '@regle/core';
import {required, minLength, email} from '@regle/rules';
import {ref} from 'vue';
const {errors, state, regle} = useRegle({email: ''}, {
email: {required, minLength: minLength(4), email}
})
</script>
<style>
input.error {
border-color: red;
}
input.valid {
border-color: green;
}
</style>
Result: