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

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

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

制約api

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

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

たとえば、

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

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

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

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

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

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

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

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

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

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

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

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: "???? ????? ????? ???? ???????? ????",
  }
};

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

メソッド2：ローカルストレージで優(yōu)先言語を設(shè)定します

2番目の方法は、localStorage

でユーザー定義の言語設(shè)定を使用することです。言い換えれば、オプションのタグを含む要素から最初に優(yōu)先言語を選択するように依頼します。選択が行われたら、彼らの好みを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をチェックし、保存された設(shè)定を使用して翻訳されたカスタム検証メッセージを返すスクリプトを作成できます。

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

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

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

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

<select></select>要約

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

リファレンス

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

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

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

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