setCustomValidity()でバリデーションメッセージの多言語対応をする

HTML標準のバリデーションでは、たとえばrequired属性を指定した場合は「このフィールドを入力してください。」というメッセージが表示される。

HTMLInputElement:setCustomValidity()メソッドを使うことで、メッセージを変更できる。

const trans = {
  en: {
    required: "Please fill this."
  },
  ja: {
    required: "入力してください。"
  }
}

let lang = navigator.language || 'ja'

const nameInput = document.querySelector('input[name="name"]')
const submitBtn = document.querySelector('button[type="submit"]')


submitBtn.addEventListener('click', (e) => {
  if (nameInput.value === '') {
    nameInput.setCustomValidity[trans[lang].required]
    nameInput.classList.add('error')
  }
}

setCustomValidity()でバリデーションメッセージの多言語対応をする

デモ