HTML フォーム検証エラー メッセージをカスタマイズするにはどうすればよいですか?

HTML フォームの検証メッセージのカスタマイズ

HTML フォームを検証する場合、デフォルトのエラー メッセージは情報が少なく、わかりにくい場合があります。ユーザー エクスペリエンスを向上させるために、これらのメッセージをカスタマイズして、より明確で意味のある対話を行うことができます。

デフォルトの検証メッセージを変更する方法:

HTML5 検証 API は、 setCustomValidity() というメソッドを使用すると、無効な入力に対するカスタム エラー メッセージを指定できます。

たとえば、提供された HTML フォームには、必須属性を持つユーザー名とパスワードの入力フィールドが含まれています。デフォルトでは、空のフィールドを含むフォームを送信すると、ブラウザに「このフィールドに記入してください」というメッセージが表示されます。このメッセージをカスタマイズするには、setCustomValidity():

<input type="text">

を使用できます。ここでは、入力フィールドが無効な場合に oninvalid 属性がトリガーされ、カスタム エラー メッセージが設定されます。 oninput 属性は、ユーザーが新しいデータを入力するときにエラー メッセージをリセットしてユーザー エクスペリエンスを向上させるため、重要です。

パスワード フィールドのカスタマイズ エラー:

提供された例では、パスワードフィールドのデフォルトエラーは*です。これは、JavaScript 内で検証を処理することで変更できます。方法は次のとおりです:

function login() {
  let username = document.getElementById("username");
  let password = document.getElementById("pass");

  if (username.value === "" || password.value === "") {
    alert("Please fill out both fields");
    return false;
  }
}

このシナリオでは、空のユーザー名またはパスワードを送信するとアラート機能がトリガーされ、カスタマイズされたエラー メッセージが表示されます。

以上がHTML フォーム検証エラー メッセージをカスタマイズするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。