input要素 required属性でハマったこと

2020.03.11

この記事は約2分で読めます。

ハマったこと

英語サイトでinputにrequiredを使ったら、エラー表示のツールチップが日本語になったこと。

知ったこと

パソコンの言語設定に依存するものであること。

詳細

メールフォームを作成する際、入力エラーをページ遷移なしで表示するためにinputタグに入れて使えるrequired。今までjQuery-Validation-Engine装備で行っていましたが、今回1箇所だけチェックボックスがあり、チェックボックス自体が1つという構成だったので、jQuery-Validation-Engineではなく閲覧するブラウザによってメッセージを出せるrequired属性を使いました。
※required属性については下記サイトに詳しく書いてありますよ。
https://www.tsukimi.net/input_required.html

先日お仕事で多言語サイト（今回は英語）を作りました。同じようにrequiredを入れて作ったのですが、英語サイトで出るエラーメッセージは日本語…。
※検索すると複数のチェックボックスの設定方法はよく出てくるのですが、チェックボックスが1個の場合、jQuery-Validation-Engineではどうしたらいいのか、イマイチ答えが出ないままです…。

翻訳をお願いした方からもその件を指摘され、このツールチップの内容はどこで編集できるのか延々検索＆テストしました。

そしたらこんな記事を発見！
https://girliemac.com/blog/2012/12/01/html5-form-validation-jp/
もしや…と思って自分のパソコンに英語言語をインストールして言語設定を変えてから再度確認してみたら…
エラーメッセージが英語に！
そうか！コーディングでどうこうする問題ではなかったんだ！と知りました。
いやはや、知識の無さがお恥ずかしい…。

というわけで同じ現象にはまる方がいたら（悩んだのは私だけかもしれない…）、試行錯誤する必要はないということです。
Safariではrequired属性が効かないという話もあったのですが、私が現在確認できる環境下においては聞かないことはなかったです。
ただ場合により効かないとなった時のために、参考になったページリンクが下記です。
https://www.web-f.net/2017/07/required.html