Skip to content

Commit d4f524d

Browse files
committed
added more blog post
1 parent 1eba5a7 commit d4f524d

2 files changed

Lines changed: 139 additions & 0 deletions

File tree

docs/BlogIndex.vue

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
<script setup lang="ts">
22
const posts = [
3+
{
4+
time: "14 July, 2025",
5+
title:
6+
"How to Validate Multilingual Error Messages in JavaScript Using Robust Validator",
7+
url: "/blog/2025-07-14-how-to-validate-multilingual-error-messages-in-javascript-using-robust-validator",
8+
},
39
{
410
time: "13 July, 2025",
511
title:
Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
---
2+
sidebar: false
3+
editLink: true
4+
outline: false
5+
prev: false
6+
next: false
7+
description: Learn how to show validation errors in different languages using Robust Validator. A simple guide to i18n and custom error messages in JavaScript.
8+
---
9+
10+
# How to Validate Multilingual Error Messages in JavaScript Using Robust Validator
11+
12+
## Intro
13+
14+
If you are building an app that supports more than one language, you probably want to show error messages in the right language too. This is called internationalization or i18n.
15+
16+
The good news is that [Robust Validator](https://validator.axe-api.com) makes this very easy. You can switch languages, use custom messages, and even create your own message formats.
17+
18+
In this post, you will learn how to change the language of error messages and set your own custom messages.
19+
20+
## Step 1: Set the Language
21+
22+
By default, Robust Validator shows messages in English. You can switch the language using the `setLocale` function.
23+
24+
```ts
25+
import { setLocale } from "robust-validator";
26+
27+
setLocale("fr"); // Use French messages
28+
```
29+
30+
That’s it. All error messages will now be shown in French.
31+
32+
## Step 2: Validate Some Data
33+
34+
Let’s try a simple example with a required rule.
35+
36+
```ts
37+
import { validate } from "robust-validator";
38+
39+
const data = {
40+
name: "",
41+
};
42+
43+
const schema = {
44+
name: "required",
45+
};
46+
47+
const result = await validate(data, schema);
48+
49+
console.log(result);
50+
```
51+
52+
If the name field is empty, you will get this message in French (after setting the locale):
53+
54+
```json
55+
{
56+
"isValid": false,
57+
"isInvalid": true,
58+
"fields": {
59+
"name": false
60+
},
61+
"errors": {
62+
"name": [
63+
{
64+
"rule": "required",
65+
"message": "Le champ est obligatoire."
66+
}
67+
]
68+
}
69+
}
70+
```
71+
72+
## Step 3: Add Your Own Messages
73+
74+
You can override the active language by users' selection for every data validation.
75+
76+
```ts
77+
import { validate } from "robust-validator";
78+
79+
const data = {
80+
name: "",
81+
};
82+
83+
const schema = {
84+
name: "required",
85+
};
86+
87+
const result = await validate(data, schema, { language: "de" });
88+
console.log(result);
89+
```
90+
91+
Now when the validation fails, it will return:
92+
93+
```json
94+
{
95+
"isValid": false,
96+
"isInvalid": true,
97+
"fields": {
98+
"name": false
99+
},
100+
"errors": {
101+
"name": [
102+
{
103+
"rule": "required",
104+
"message": "Das Feld ist erforderlich."
105+
}
106+
]
107+
}
108+
}
109+
```
110+
111+
## When to Use This
112+
113+
Multilingual validation is useful when:
114+
115+
- You are building an app for users in different countries
116+
- You want to make your forms more friendly and clear
117+
- You are working on international e-commerce, education, or health platforms
118+
- You just want better control over your messages
119+
120+
## Wrap-Up
121+
122+
Robust Validator makes it easy to show error messages in any language.
123+
124+
This gives you full control over how your validation behaves in a multilingual app.
125+
126+
Try it out today and give your users a better experience in their own language.
127+
128+
## Related Links
129+
130+
- [Getting Started](https://validator.axe-api.com/getting-started)
131+
- [All Validation Rules](https://validator.axe-api.com/rules)
132+
- [Internationalization (i18n)](https://validator.axe-api.com/i18n)
133+
- [Customization](https://validator.axe-api.com/customization)

0 commit comments

Comments
 (0)