JavaScriptで同値チェックを実装してHTML5と同じデザインのエラーを出す方法

HTML5では input タグの type 属性に email を指定すると 入力された値が メールアドレスか自動で確認してくれるなど 随分と楽になりました。
しかしながら HTML5 では メールアドレスやパスワードを確認のために入力してもらった際に必要な 同値チェック できる仕組みが無く 自前で準備する必要があります。
今回は HTML5 が type属性などの確認時に出すエラーと 同じデザインでエラーを出す方法をご紹介します。

HTMLのソース

<div class="form-group">
	<label>パスワード</label>
	<input type="password" class="form-control" name="password" id="password" required>
</div>
<div class="form-group">
	<label>パスワード (再確認)</label>
	<input type="password" class="form-control" name="confirm" oninput="CheckPassword(this)" required>
</div>

JavaScriptのソース

<script>
	function CheckPassword(confirm){
		// 入力値取得
		var input1 = password.value;
		var input2 = confirm.value;
		// パスワード比較
		if(input1 != input2){
			confirm.setCustomValidity("入力値が一致しません。");
		}else{
			confirm.setCustomValidity('');
		}
	}
</script>

サンプル

実際の動作を試してみてください。
未入力の時に HTML5によって発生するエラーと 同値チェックの時に発生するエラーのデザインが同じで、統一感があるのがお分かりいただけるのではないでしょうか。

※サンプルの都合上 form と button タグを追加しました。

参考文献

• メールアドレス入力フォームでの値の比較・確認 - Labyrinth of Wisdom