メールアドレスの入力フォームで、ユーザーによる誤入力を防ぐためには、確認用のメールアドレス入力欄を設けることが一般的です。今回は、jQueryを活用して、確認用メールアドレスの入力内容が元のメールアドレスと一致するかどうかをリアルタイムでチェックする方法を紹介します。
HTMLの準備
まずは、HTMLフォームを準備します。以下は、基本的なフォームの例です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Email Confirmation Check</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('#email, #confirm_email').on('keyup', function () {
var email = $('#email').val();
var confirmEmail = $('#confirm_email').val();
if (email == confirmEmail) {
$('#email_match').text('メールアドレスが一致しています').css('color', 'green');
} else {
$('#email_match').text('メールアドレスが一致しません').css('color', 'red');
}
});
});
</script>
</head>
<body>
<label for="email">メールアドレス:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="confirm_email">メールアドレス確認:</label>
<input type="email" id="confirm_email" name="confirm_email" required><br><br>
<div id="email_match"></div>
</body>
</html>jQueryでの実装
上記の例では、jQueryを使って#emailと#confirm_emailの入力内容をキーアップイベントで監視し、その内容を比較しています。一致する場合は緑色のテキストで「メールアドレスが一致しています」と表示され、一致しない場合は赤色で「メールアドレスが一致しません」と表示されます。
$(document).ready(function() {
$('#email, #confirm_email').on('keyup', function () {
var email = $('#email').val();
var confirmEmail = $('#confirm_email').val();
if (email == confirmEmail) {
$('#email_match').text('メールアドレスが一致しています').css('color', 'green');
} else {
$('#email_match').text('メールアドレスが一致しません').css('color', 'red');
}
});
});実際の動作
ユーザーがメールアドレスと確認用メールアドレスを入力すると、リアルタイムで入力内容が比較されます。これにより、ユーザーは入力間違いをすぐに見つけて修正することができます。
このようにして、jQueryを使って確認用メールアドレスの一致をチェックすることで、ユーザーエクスペリエンスを向上させ、フォームの正確性を確保することができます。
