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

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

HTML フォームで REQUIRED フィールドを空白のままにすると、通常、「お願いします」というデフォルトのメッセージが表示されます。このフィールドに記入してください。」これをカスタマイズして、より具体的でわかりやすいエラー メッセージを提供できます。

デフォルトのエラー メッセージの変更

デフォルトのエラー メッセージを変更するには、setCustomValidity() を使用します。方法。たとえば、ID「username」の入力フィールドのエラー メッセージを「このフィールドは空白のままにすることはできません」に設定するには、次のコードを追加します。

<input type="text">

エラー メッセージの非表示

ユーザーがフィールドにデータを入力した後、エラー メッセージは非表示になります。これは、oninput イベント ハンドラーを使用してエラー メッセージを "" に設定することで実行できます:

oninput="this.setCustomValidity('')"

注: インライン イベント ハンドラーでは "this" キーワードは必須ではありませんが、一貫性のために使用されます。

例

次のコードは、 ofsetCustomValidity() を使用してカスタム エラー メッセージを提供し、ユーザーが新しいデータを入力したときにそれを非表示にします:

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