お問い合わせフォームでメールアドレスを入力する時、確認用メールアドレスを含め2回メールアドレス入力するWEBサイトをよく見かけます。
この記事では入力されたメールアドレス2つが一致するかどうかをチェックする方法をご紹介したいと思います。

メールアドレスの形式が正しいかどうかのバリデーションチェックはこちらのブログでご紹介しています。

【バリデーション】メールアドレス｜フォームの入力形式チェックを実装する方法

確認用メールアドレスの入力が一致するか比較チェックする方法

完成コード

まずは完成コードを見てみましょう。

HTMLはこちら。

<form>
    <p>メールアドレス：<input type="text" name="email1"></p>
    <p>メールアドレス（確認用）：<input type="text" name="email2"></p>
    <button>一致するかチェックする</button>
</form>

jQueryはこちら。

$('button').on('click',function(){
    let email1 = $('input[name="email1"]').val();
    let email2 = $('input[name="email2"]').val();
    if( email1 !== '' && email2 !== '' ) {
        if( email1 === email2 ) {
            alert('入力内容が一致しました');
        }
        else {
            alert('入力内容が一致しません');
            return false;
        }
    }
    else {
        alert('入力してください');
        return false;
    }
});

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

こちらをコピペするだけで実装することが出来ます。

コードの解説

ここからはコードの解説です。

<p>メールアドレス：<input type="text" name="email1"></p>
<p>メールアドレス（確認用）：<input type="text" name="email2"></p>

入力するメールアドレスのname属性をそれぞれ設定します。
ここではそれぞれ「mail1」と「mail2」としています。

続いて、jQuery部分のコードの解説です。

$('button').on('click',function(){ ... });

このjQueryのコードは上の記述により、<button>タグをクリックした際、動作するようになっています。

let email1 = $('input[name="email1"]').val();
let email2 = $('input[name="email2"]').val();

jQueryを使い、name属性が「email1」と「email2」に入力された値を取得し、それぞれ変数に格納します。

if( email1 !== '' && email2 !== '' ) {
    // name="email1"とname="email2"が入力された場合の処理

}
else {
    // name="email1"とname="email2"が入力されていない場合の処理
    alert('入力してください');
    return false;
}

この分岐でそれぞれのフィールドに値が入力されているかをチェックして入力している場合と入力していない場合に分岐しています。
値が入力されていない場合は「入力してください」とアラートが表示されるようになっています。

入力されている場合は、以下の処理が実行されます。

if( email1 === email2 ) {
    alert('入力内容が一致しました');
}
else {
    alert('入力内容が一致しません');
    return false;
}

取得したname="email1"とname="email2"の値を比較します。
比較して一致していれば、「入力内容が一致しました」とアラートが表示され、一致していない場合は「入力内容が一致しません」とアラートが表示されます。

まとめ

いかがでしたか？
メールアドレスの入力を間違えてしまっている場合、問い合わせをしてくれたユーザーへ返事をすることが出来ません。
確認用メールアドレスを入力してもらう場合は、必ず2つの入力内容が一致しているかチェックするようにしますよう。

最後にもう一度完成コードを記載します。

<form>
    <p>メールアドレス：<input type="text" name="email1"></p>
    <p>メールアドレス（確認用）：<input type="text" name="email2"></p>
    <button>一致するかチェックする</button>
</form>

$('button').on('click',function(){
    let email1 = $('input[name="email1"]').val();
    let email2 = $('input[name="email2"]').val();
    if( email1 !== '' && email2 !== '' ) {
        if( email1 === email2 ) {
            alert('入力内容が一致しました');
        }
        else {
            alert('入力内容が一致しません');
            return false;
        }
    }
    else {
        alert('入力してください');
        return false;
    }
});

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.