HTMLフォームのカスタム翻訳されたメッセージングを作成する2つの方法

HTMLフォームには、必要に応じて入力の設定、範囲スライダーの最小および最大制約の設定、電子メール入力のモードの設定などの事前定義されたルールに基づいて、フォーム入力およびその他のコントロールを検証するための組み込みメソッドがあります。ネイティブHTMLとブラウザは、複雑なスクリプトなしでフォーム送信を検証するための多くの「無料」機能を提供します。

何かが正しく検証されていない場合は？フォームを使用して人に表示する「無料の」エラーメッセージが表示されます。

これらは通常ジョブを完了するのに十分ですが、より具体的なエラーコンテンツが必要な場合は、特にブラウザ全体で翻訳されたコンテンツを処理する必要がある場合は、これらのメッセージをオーバーライドする必要がある場合があります。これがどのように機能するかです。

制約api

制約APIは、デフォルトのHTMLフォーム検証メッセージをオーバーライドするために使用され、独自のエラーメッセージを定義できるようにします。 Chris Ferdinandiは、CSS-Tricksでこれを詳細に検討しました。

要するに、制約APIは、入力要素を制御するように設計されています。 APIは、単一の入力要素で、またはフォーム要素から直接呼び出すことができます。

たとえば、

このシンプルなフォーム入力を使用しているとします：

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

要素を取得し、fullNameInputメソッドを呼び出して、カスタムメッセージを渡すことで、独自のエラーメッセージを設定できます。 setCustomValidity()

[送信]ボタンをクリックすると、指定されたメッセージがデフォルトのメッセージの場所に表示されます。

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

カスタムフォーム検証メッセージの翻訳

カスタムエラーメッセージの主なユースケースの1つは、国際化をよりよく処理することです。これを2つの主な方法で行うことができます。これを達成する他の方法はありますが、ここで最も簡単だと思うものを紹介します。

メソッド1：ブラウザの言語設定を使用します

最初の方法は、ブラウザ言語設定を使用することです。ブラウザから言語設定を取得し、言語をサポートするかどうかを確認できます。言語をサポートすると、翻訳されたメッセージを返すことができます。その特定の言語をサポートしていない場合、代替応答が提供されます。

以前のHTMLの使用を続けて、翻訳オブジェクトを作成して、希望する言語を保存します（スクリプトタグ内）。この場合、オブジェクトは英語、スワヒリ語、アラビア語をサポートします。

次に、オブジェクトのタグを抽出し、ブラウザの言語に一致させる必要があります。

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

ここでの関数は、英語でサポートされているブラウザ言語または代替言語を比較および返します。例を実行して、ボタンがクリックされたら、カスタムエラーメッセージを表示する必要があります。

メソッド2：ローカルストレージで優先言語を設定します

2番目の方法は、localStorage

でユーザー定義の言語設定を使用することです。言い換えれば、オプションのタグを含む要素から最初に優先言語を選択するように依頼します。選択が行われたら、彼らの好みをLocalStorageに保存して、それを参照できるようにします。 <option></option> <select></select>

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

要素を使用して、LocalStorageをチェックし、保存された設定を使用して翻訳されたカスタム検証メッセージを返すスクリプトを作成できます。

<select></select>このスクリプトは、現在選択されているオプションに初期値を設定し、値をLocalStorageに保存し、必要に応じてLocalStorageから取得します。一方、スクリプトは、優れたユーザーエクスペリエンスを確保するために、元のフォールバックを維持しながら、

要素によってトリガーされたすべての変更イベントで選択されたオプションを更新します。

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

devtoolsをオンにすると、言語設定を選択するときに、ユーザーの優先値がLocalStorageで利用可能であることがわかります。

<select></select>要約

それだけです！この簡単なトリックが役立つことを願っています。制約APIを使用する方法を理解するときに、以前にそれを持ちたいと思っていたことを知っています。これは、あなたが知っているウェブ上のそれらの1つですが、正確な方法を見つけるのは難しいです。

リファレンス

フォーム検証シリーズ（Chris ferdinandi）

擬似クラスセレクター（chris coyier）

を理解してください
• 制約検証（MDN）
• クライアントフォーム検証（MDN）

以上がHTMLフォームのカスタム翻訳されたメッセージングを作成する2つの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。