よくお問い合わせフォームに、メールアドレスを入力する欄がある。
それと一緒に、確認のためもう一度入力する欄もあることが多い。
ぶっちゃけコピペされたらどうしようもないのだが、そうでない場合にリアルタイムでチェックすることで少しはユーザビリティが上がるんじゃないかと思った。
javascriptを使って、こんなコードを書いてみた。
<script type="text/javascript">
<!--
function EmailCheck() {
document.getElementById('email_check').innerHTML = '';
if (document.getElementById('email').value != '' && document.getElementById('email_r').value != '') {
if (document.getElementById('email').value != document.getElementById('email_r').value){ document.getElementById('email_check').innerHTML = 'メールアドレスが一致しません。';
} else {
document.getElementById('email_check').innerHTML = '';
}
}
}
// -->
</script>
HTML内の記述はこんな感じ。
<input type="text" id="email" /> ←Email入力欄
<div id="email_check"></div> ←エラー出力欄
<input type="text" id="email_r" onKeyup="EmailCheck()" /> ←確認用Email入力欄
これでEmail欄に入力がある時に、確認用Email欄の入力をするとリアルタイムで合っているかチェックがかかる。
jQueryを使えばもっとスマートかもしれないけど、直感で分かる感じで作ってみた。
まあ一応動くのでよしとしよう。