JavaScript

You can get the browser's built-in error message when form input is invalid.

validationMessage [property]

validationMessage とは？

validationMessage は、HTMLフォームで入力チェック（バリデーション）に失敗したときに、ブラウザが自動で表示するエラーメッセージをJavaScriptで取得できるプロパティです。

使い方のイメージ

たとえば、ユーザーが入力欄に空のまま送信しようとした場合、ブラウザは「このフィールドを入力してください」といったメッセージを表示しますよね。

このメッセージは、JavaScriptで input.validationMessage と書くことで、プログラムの中から確認したり、独自のエラーメッセージ表示に使ったりできます。

特徴

Sample

HTML

<input id="email" type="email" required>
<button onclick="check()">送信</button>
<p id="error"></p>

<script>
	function check() {
		const input = document.getElementById('email');
		const error = document.getElementById('error');

		if (!input.checkValidity()) {
			error.textContent = input.validationMessage;
		} else {
			error.textContent = '入力は正しいです。';
		}
	}
</script>

ポイント