jQueryを使用して、お問い合わせフォームによくある「メールアドレス」、「メールアドレス確認」が一致しているいるか確認する方法を紹介します。
では早速書いていこう！
jQueryでフォームのメールアドレスが一致しているか確認する方法
今回は、jQueryでinputに入力された「value属性」を取得して一致するかどう確認します。
こんな感じ。
メールアドレス一致【HTML】
メールアドレスを入力するinputにIDを降っておきます。
onClickで実行します。
<form> <input class="color-gray" id="mail01" type="email" name="email1" required> <input class="color-gray" id="mail02" type="email" name="email2" required> <input type="submit" value="内容を確認する" onClick="return CheckMail()"> </form>
メールアドレス一致【jQuery】
HTMLで指定したIDをのvalue属性を取得する。
function CheckMail() {
// 入力値取得
var input1 = $("#mail01").val();
var input2 = $("#mail02").val();
// メール比較
if (input1 !== input2) {
window.alert("メールアドレスが一致しません。");
return false;
} else {
return true;
}
}
以上！
フォームでメールアドレス一致のチェックを簡易に行う際は、使用してみてね！
ABOUT ME
