Skip to content

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:

Released under the MIT License. Logo by Johannes Lacourly