Appearance

Validation de formulaires ​

La validation des formulaires côté frontend utilise Regle (@regle/core, @regle/rules). C'est l'approche standard du projet : tout nouveau formulaire passe par le composable partagé plutôt que par la validation native du navigateur.

Pourquoi pas la validation native ​

Les attributs HTML (required, type="email", minlength…) déclenchent les bulles de validation du navigateur, rendues dans la langue de l'interface du navigateur (donc non synchronisées avec la langue de l'application) et non stylables. On les désactive avec novalidate sur le <form> et on valide en JS avec des messages passant par vue-i18n.

Composable partagé — src/lib/regle.ts ​

defineRegleConfig produit un useRegle configuré une seule fois, avec les règles courantes déjà associées à un message traduit (withMessage) :

  • required → validation.required
  • email → validation.email
  • minLength → validation.minLength (interpolation {min})

Les messages sont passés sous forme de fonctions (() => t(...)), pas de chaînes : Regle les réévalue paresseusement, donc les erreurs déjà affichées se retraduisent quand la langue change. rules() s'exécute pendant le setup du composant appelant, ce qui rend useI18n() valide à cet endroit. Les messages vivent dans le catalogue validation.* (voir Internationalisation).

Utilisation dans un formulaire ​

ts
import { email, minLength, required } from "@regle/rules"
import { useRegle } from "@/lib/regle"

const form = reactive({ email: "", password: "" })
const { r$ } = useRegle(form, () => ({
  email: { required, email },
  password: { required, minLength: minLength(6) },
}))

async function onSubmit() {
  const { valid } = await r$.$validate() // asynchrone ; marque les champs « touchés »
  if (!valid) return
  // …soumettre…
}

Côté template : r$.$errors.<champ> est un tableau de messages actifs (affichés une fois le champ « touché » ou après $validate()). On affiche le premier message sous le champ et on reflète l'état avec aria-invalid. Les règles peuvent dépendre d'un état réactif : LoginForm.vue rend le nom complet required uniquement en mode inscription en passant une fonction de règles qui lit mode.

Référence d'implémentation ​

src/components/auth/LoginForm.vue est le premier consommateur (voir Authentification).

Contributors

No contributors

Changelog

No recent changes