|
| 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