Two Ways to Create Custom Translated Messaging for HTML Forms

HTML forms have built-in methods to verify form input and other controls based on predefined rules such as setting input as required, setting minimum and maximum constraints for range sliders, or setting modes for email inputs to check if the format is correct. Native HTML and browsers provide us with many "free" features to verify form submissions without complex scripts.

If something is not verified correctly? We will get a "free" error message to show to the person using the form.

These are usually enough to get the job done, but if we need more specific error content, we may need to override these messages – especially if we need to process translated content across browsers. Here is how it works.

Constraint API

Constraint API is used to override the default HTML form validation message and allows us to define our own error message. Chris Ferdinandi even gave a detailed look at this on CSS-Tricks.

In short, the constraint API is designed to provide control over input elements. The API can be called in a single input element or directly from a form element.

For example, suppose we are using this simple form input:

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

We can set our own error message by getting the fullNameInput element and calling the setCustomValidity() method on it, and then passing it a custom message:

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

When you click the Submit button, the specified message will be displayed in the default message location.

Translation of custom form verification message

One of the main use case for custom error messages is to better handle internationalization. We can do this in two main ways. There are other ways to achieve this, but I'm going to introduce here the one I think is the most straightforward.

Method 1: Use the browser's language settings

The first method is to use the browser language settings. We can get the language settings from the browser and then check if we support the language. If we support the language, we can return the translated message. If we do not support that particular language, an alternate response is provided.

Continue to using the previous HTML, we will create a translation object to save your preferred language (inside the script tag). In this case, the object supports English, Swahili, and Arabic.

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: "يرجى إدخال عنوان بريد إلكتروني صالح",
  }
};

Next, we need to extract the tags of the objects and match them to the browser's language.

// 翻译对象
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");
  }
});

The getUserLang() function here compares and returns the supported browser language or alternative languages ​​in English. Run the example, when the button is clicked, a custom error message should be displayed.

Method 2: Set the preferred language in local storage

The second method is to use user-defined language settings in localStorage . In other words, we ask users to first select their preferred language from the <option></option> elements containing the optional <select></select> tag. Once the choice is made, we save their preferences to localStorage so that we can reference it.

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

With the <select></select> element, we can create a script that checks localStorage and uses saved preferences to return a translated custom verification message:

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

This script sets the initial value to the currently selected option, saves the value to localStorage, and retrieves it from localStorage as needed. Meanwhile, the script updates the selected options in every change event triggered by the <select></select> element while maintaining the original fallback to ensure a good user experience.

If we turn on DevTools, when selecting language preferences, we will see that the user's preferred value is available in localStorage.

Summary

That's it! I hope this quick little trick helps. I know I wanted to have it before when figuring out how to use the constraint API. This is one of those things on the web that you know possible, but the exact method is hard to find.

Reference

• Form Verification Series (Chris Ferdinandi)
• Understand the Pseudo-Class Selector (Chris Coyier)
• Constraint Verification (MDN)
• Client Form Verification (MDN)

The above is the detailed content of Two Ways to Create Custom Translated Messaging for HTML Forms. For more information, please follow other related articles on the PHP Chinese website!