Displaying errors

Regle is a headless library, allowing you to display error messages in any way you choose. You can also use its internal state to apply classes or trigger behaviors dynamically.

Showing errors messages

You can display your errors by iterating though r$.$errors.xxx, xxx being the field you need to check.

You can also access r$.$fields.xxx.$errors or r$.$fields.xxx.$silentErrors.

App.vue

<template>
  <input 
     v-model='r$.$fields.email.$value' 
    :class="{ error: r$.$fields.email.$error }" 
    placeholder='Type your email'
  />

  <ul>
    <li v-for="error of r$.$fields.email.$errors" :key='error'>
      {{ error }}
    </li>
  </ul>
</template>

<script setup lang='ts'>
import { useRegle } from '@regle/core';
import { required, minLength, email } from '@regle/rules';

const { r$ } = useRegle({ email: '' }, {
  email: { required, minLength: minLength(4), email }
})
</script>

Result:

Applying an error and valid class

App.vue

<template>
  <input 
    :class="{
      error: r$.$fields.email.$error,
      valid: r$.$fields.email.$valid
    }" 
    v-model='r$.$value.email' 
    placeholder='Type your email'
  />

  <ul>
    <li v-for="error of r$.$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 { r$ } = useRegle({ email: '' }, {
  email: { required, minLength: minLength(4), email }
})
</script>

<style>
input.error {
  border-color: red;
}

input.valid {
  border-color: green;
}
</style>

Result: