フォームによくある「メールアドレス」、「メールアドレス確認」をｊQueryを使用してチェックします。
では早速やっていきます！
jQueryでフォームのメールアドレスが一致しているか確認する方法
まずは、HTMLを書いていく〜。
メールアドレス入力欄を作る
inputで入力欄を作って、「内容を確認する」を押した際に、チェックを行うように「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でvalue値の確認
事前に「input」にidを振っておき、jQueryでvalue値を取得します。
中の値が一致していれば、確認ページへ移動し、一致しない場合は、ウィンドウで「メールアドレスが一致しません。」と表示させます。
function CheckMail() {
// 入力値取得
var input1 = $("#mail01").val();
var input2 = $("#mail02").val();
// メール比較
if (input1 !== input2) {
window.alert("メールアドレスが一致しません。");
return false;
} else {
return true;
}
}
完成！
フォームのチェックボックスを必須にする方法も紹介しています。
フォームのチェックボックスを必須化！１つ以上チェックがないと送信できないようにする方法
ABOUT ME
