Two Ways To Create Custom Translated Messaging For HTML Forms

We can set our own error message by grabbing the element and calling the setCustomValidity() method on it before passing it a custom message:

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

When the submit button is clicked, the specified message will show up in place of the default one.

Translating custom form validation messages

One major use case for customizing error messages is to better handle internationalization. There are two main ways we can approach this. There are other ways to accomplish this, but what I’m covering here is what I believe to be the most straightforward of the bunch.

Method 1: Leverage the browser’s language setting

The first method is using the browser language setting. We can get the language setting from the browser and then check whether or not we support that language. If we support the language, then we can return the translated message. And if we do not support that specific language, we provide a fallback response.

Continuing with the HTML from before, we’ll create a translation object to hold your preferred languages (within the script tags). 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 object’s labels and match them against the browser’s language.

// the translations object
const supportedLangs = Object.keys(translations);
const getUserLang = () => {
  // split to get the first part, browser is usually en-US
  const browserLang = navigator.language.split('-')[0];
  return supportedLangs.includes(browserLang) ? browserLang :'en';
};

// translated error messages
const errorMsgs = translations[getUserLang()];// form element
const form = document.getElementById("myForm");// button elementconst btn = document.getElementById("btn");// name input
const fullNameInput = document.getElementById("fullName");// wrapper for error messaging
const errorSpan = document.getElementById("error-span");

// when the button is clicked…
btn.addEventListener("click", function (event) {  // if the name input is not there…
  if (!fullNameInput.value) {    // …throw an error
    fullNameInput.setCustomValidity(errorMsgs.required);    // set an .error class on the input for styling
    fullNameInput.classList.add("error");
  }
});

Here the getUserLang() function does the comparison and returns the supported browser language or a fallback in English. Run the example and the custom error message should display when the button is clicked.

Method 2: Setting a preferred language in local storage

A second way to go about this is with user-defined language settings in localStorage. In other words, we ask the person to first select their preferred language from a element containing selectable tags. Once a selection is made, we save their preference to localStorage so we can reference it.

Choose Language:

  English   Swahili   Arabic

With the in place, we can create a script that checks localStorage and uses the saved preference to return a translated custom validation message:

// the 

element const languageSelect = document.getElementById("languageSelect"); // the