Deux façons de créer une messagerie traduite personnalisée pour les formulaires HTML

Les formulaires

HTML ont des méthodes intégrées pour vérifier l'entrée du formulaire et d'autres contrôles en fonction des règles prédéfinies telles que le réglage des entrées selon les besoins, le réglage des contraintes minimales et maximales pour les curseurs de plage ou les modes de définition des entrées de messagerie pour vérifier si le format est correct. Le HTML et les navigateurs natifs nous fournissent de nombreuses fonctionnalités "gratuites" pour vérifier les soumissions de formulaire sans scripts complexes.

Si quelque chose n'est pas vérifié correctement? Nous obtiendrons un message d'erreur "gratuit" à afficher à la personne en utilisant le formulaire.

Ceux-ci sont généralement suffisants pour faire le travail, mais si nous avons besoin d'un contenu d'erreur plus spécifique, nous devrons peut-être remplacer ces messages - surtout si nous devons traiter le contenu traduit entre les navigateurs. Voici comment cela fonctionne.

API de contrainte

L'API de contrainte

est utilisée pour remplacer le message de validation de formulaire HTML par défaut et nous permet de définir notre propre message d'erreur. Chris Ferdinandi a même donné un aperçu détaillé de cela sur CSS-Tricks.

En bref, l'API de contrainte est conçue pour fournir un contrôle sur les éléments d'entrée. L'API peut être appelée dans un seul élément d'entrée ou directement à partir d'un élément de formulaire.

Par exemple, supposons que nous utilisons cette entrée de formulaire simple:

<label for="fullName">Full Name</label>
<input type="text" id="fullName" required>
<button type="submit" id="btn">Submit</button>

Nous pouvons définir notre propre message d'erreur en obtenant l'élément fullNameInput et en appelant la méthode setCustomValidity() dessus, puis en lui faisant passer un message personnalisé:

const fullNameInput = document.getElementById("fullName");
fullNameInput.setCustomValidity("This is a custom error message");

Lorsque vous cliquez sur le bouton Soumettre, le message spécifié sera affiché dans l'emplacement du message par défaut.

Traduction du message de vérification de formulaire personnalisé

L'un des principaux cas d'utilisation pour les messages d'erreur personnalisés est de mieux gérer l'internationalisation. Nous pouvons le faire de deux manières principales. Il existe d'autres moyens d'y parvenir, mais je vais présenter ici celui qui, je pense, est le plus simple.

Méthode 1: Utilisez les paramètres de la langue du navigateur

La première méthode consiste à utiliser les paramètres de la langue du navigateur. Nous pouvons obtenir les paramètres de la langue du navigateur, puis vérifier si nous soutenons la langue. Si nous soutenons la langue, nous pouvons retourner le message traduit. Si nous ne soutenons pas cette langue particulière, une réponse alternative est fournie.

Continuer à utiliser le HTML précédent, nous créerons un objet de traduction pour enregistrer votre langue préférée (à l'intérieur de la balise de script). Dans ce cas, l'objet soutient l'anglais, le swahili et l'arabe.

const translations = {
  en: {
    required: "Please fill this",
    email: "Please enter a valid email address",

  },
  sw: {
    required: "Sehemu hii inahitajika",
    email: "Tafadhali ingiza anwani sahihi ya barua pepe",
  },
  ar: {
    required: "هذه الخانة مطلوبه",
    email: "يرجى إدخال عنوان بريد إلكتروني صالح",
  }
};

Ensuite, nous devons extraire les balises des objets et les faire correspondre à la langue du navigateur.

// 翻译对象
const supportedLangs = Object.keys(translations);
const getUserLang = () => {
  // 拆分以获取第一部分，浏览器通常为 en-US
  const browserLang = navigator.language.split('-')[0];
  return supportedLangs.includes(browserLang) ? browserLang :'en';
};

// 翻译后的错误消息
const errorMsgs = translations[getUserLang()];
// 表单元素
const form = document.getElementById("myForm");
// 按钮元素
const btn = document.getElementById("btn");
// 名称输入
const fullNameInput = document.getElementById("fullName");
// 错误消息的包装器
const errorSpan = document.getElementById("error-span");

// 单击按钮时……
btn.addEventListener("click", function (event) {
  // 如果名称输入不存在……
  if (!fullNameInput.value) {
    // ……抛出错误
    fullNameInput.setCustomValidity(errorMsgs.required);
    // 为样式设置输入的 .error 类
    fullNameInput.classList.add("error");
  }
});

La fonction getUserLang() ici compare et renvoie la langue du navigateur prise en charge ou les langues alternatives en anglais. Exécutez l'exemple, lorsque le bouton est cliqué, un message d'erreur personnalisé doit être affiché.

Méthode 2: Définissez le langage préféré dans le stockage local

La deuxième méthode consiste à utiliser Paramètres de langue définis par l'utilisateur dans localStorage . En d'autres termes, nous demandons aux utilisateurs de sélectionner d'abord leur langage préféré dans les éléments <option></option> contenant la balise <select></select> facultative. Une fois le choix fait, nous enregistrons leurs préférences à LocalStorage afin que nous puissions le référencer.

<label for="fullName">Full Name</label>
<input type="text" id="fullName" required>
<button type="submit" id="btn">Submit</button>

Avec l'élément <select></select>, nous pouvons créer un script qui vérifie LocalStorage et utilise des préférences enregistrées pour renvoyer un message de vérification personnalisé traduit:

const fullNameInput = document.getElementById("fullName");
fullNameInput.setCustomValidity("This is a custom error message");

Ce script définit la valeur initiale de l'option actuellement sélectionnée, enregistre la valeur à LocalStorage et la récupère à partir de localStorage selon les besoins. En attendant, le script met à jour les options sélectionnées dans chaque événement de modification déclenché par l'élément <select></select> tout en maintenant le secours d'origine pour assurer une bonne expérience utilisateur.

Si nous allumons Devtools, lors de la sélection des préférences linguistiques, nous verrons que la valeur préférée de l'utilisateur est disponible dans LocalStorage.

Résumé

c'est tout! J'espère que cette petite astuce rapide aide. Je sais que je voulais l'avoir avant lorsque je trouve comment utiliser l'API de contrainte. C'est l'une de ces choses sur le Web que vous savez possible, mais la méthode exacte est difficile à trouver.

référence

• Série de vérification de formulaire (Chris Ferdinandi)
• Comprendre le sélecteur de pseudo-classe (Chris Coyier)
• Vérification des contraintes (MDN)
• Vérification du formulaire client (MDN)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!