Validation and Error Messages

Section 9.12: Validation and Error Messages in Multilingual Applications

Introduction

Validation ensures that user inputs meet predefined rules, while error messages communicate issues effectively to users. In multilingual applications, validation logic must respect language-specific rules, and error messages must be clear, culturally appropriate, and localized. Effective validation and error handling enhance user experience and prevent misunderstandings or frustration.

Examples and Challenges

1. Examples of Validation Rules

   • Name Validation: Allow non-Latin scripts (e.g., Cyrillic, Arabic, Devanagari) for names.
   • Email Validation: Ensure consistency with internationalized domain names (e.g., "пример@почта.рф").
   • Phone Numbers: Validate country-specific formats and optional international prefixes.
   • Postal Codes: Handle diverse formats like "12345" (US) vs. "SW1A 1AA" (UK).

2. Challenges

   • Language-Specific Rules: Scripts and formats differ across languages and regions.
   • Error Message Localization: Messages must be translated and adapted for cultural appropriateness.
   • Multilingual Input: Support mixed-script inputs, such as names containing Latin and non-Latin characters.
   • Accessibility: Ensure error messages are concise, informative, and screen reader-friendly.

Implementation Solutions with Examples

1. Language-Specific Validation Rules

   PHP:

   $name = $_POST['name'];
   if (!preg_match('/^[\p{L} \'-]+$/u', $name)) {
       echo "Invalid name. Please use letters, spaces, apostrophes, or hyphens.";
   } else {
       echo "Valid name.";
   }
   

   Python:

   import re
   
   name = "Иван Иванов"
   if re.match(r'^[\p{L} \'-]+$', name):
       print("Valid name.")
   else:
       print("Invalid name. Please use letters, spaces, apostrophes, or hyphens.")
   

   JavaScript:

   const name = "Иван Иванов";
   const isValidName = /^[\p{L} \'-]+$/u.test(name);
   console.log(isValidName ? "Valid name." : "Invalid name. Please use letters, spaces, apostrophes, or hyphens.");
   

2. Internationalized Email Validation

   PHP:

   $email = $_POST['email'];
   if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
       echo "Invalid email address.";
   } else {
       echo "Valid email address.";
   }
   

   Python:

   import re
   
   email = "пример@почта.рф"
   pattern = r'^[\w\.-]+@[\w\.-]+\.\w+$'
   if re.match(pattern, email):
       print("Valid email address.")
   else:
       print("Invalid email address.")
   

   JavaScript:

   const email = "пример@почта.рф";
   const isValidEmail = /^[\w.-]+@[\w.-]+\.\w+$/.test(email);
   console.log(isValidEmail ? "Valid email address." : "Invalid email address.");
   

3. Localized Error Messages

   PHP (with Symfony Translation):

   use Symfony\Component\Translation\Translator;
   use Symfony\Component\Translation\Loader\ArrayLoader;
   
   $translator = new Translator('fr');
   $translator->addLoader('array', new ArrayLoader());
   $translator->addResource('array', [
       'invalid_email' => "Adresse e-mail invalide.",
   ], 'fr');
   
   echo $translator->trans('invalid_email');
   

   Python (with gettext):

   import gettext
   
   translations = gettext.translation('messages', localedir='locale', languages=['fr'])
   translations.install()
   _ = translations.gettext
   
   print(_('Invalid email address.'))  # Outputs: Adresse e-mail invalide.
   

   JavaScript (with i18next):

   import i18next from 'i18next';
   
   i18next.init({
       lng: 'fr',
       resources: {
           fr: {
               translation: {
                   invalid_email: 'Adresse e-mail invalide.',
               },
           },
       },
   });
   
   console.log(i18next.t('invalid_email')); // Outputs: Adresse e-mail invalide.
   

4. Validation for Phone Numbers

   PHP:

   $phone = $_POST['phone'];
   if (!preg_match('/^\+?[0-9]{10,15}$/', $phone)) {
       echo "Invalid phone number.";
   } else {
       echo "Valid phone number.";
   }
   

   Python:

   import re
   
   phone = "+1234567890"
   if re.match(r'^\+?[0-9]{10,15}$', phone):
       print("Valid phone number.")
   else:
       print("Invalid phone number.")
   

   JavaScript:

   const phone = "+1234567890";
   const isValidPhone = /^\+?[0-9]{10,15}$/.test(phone);
   console.log(isValidPhone ? "Valid phone number." : "Invalid phone number.");
   

5. Screen Reader-Friendly Error Messages

   HTML:

   <label for="email">Email:</label>
   <input type="email" id="email" aria-describedby="email-error">
   <div id="email-error" role="alert">Invalid email address.</div>
   

   JavaScript:

   const input = document.getElementById('email');
   const error = document.getElementById('email-error');
   
   input.addEventListener('input', () => {
       if (!input.validity.valid) {
           error.textContent = "Invalid email address.";
           error.style.display = "block";
       } else {
           error.style.display = "none";
       }
   });
   

6. Fallback for Missing Translations

   PHP:

   $messages = [
       'fr' => 'Adresse e-mail invalide.',
   ];
   
   $locale = 'es'; // Missing locale
   echo $messages[$locale] ?? "Invalid email address.";
   

   Python:

   messages = {
       'fr': 'Adresse e-mail invalide.',
   }
   
   locale = 'es'  # Missing locale
   print(messages.get(locale, "Invalid email address."))
   

   JavaScript:

   const messages = {
       fr: 'Adresse e-mail invalide.',
   };
   
   const locale = 'es'; // Missing locale
   console.log(messages[locale] || "Invalid email address.");
   

7. Testing and Debugging
   • Use automated tests to ensure validation rules work for all supported languages and scripts.
   • Validate input formats manually for edge cases, such as mixed-script entries.
   • Test localized error messages with native speakers to ensure accuracy.

By implementing robust validation and localized error messages, you can enhance user experience, reduce frustration, and ensure inclusivity across diverse languages and cultures. Would you like further examples or details?