-jQuery-メールアドレス入力確認付メールフォーム
今回は、jQueryを使ってメールフォーム（メールアドレス入力確認付）を作成してみました。
必須項目や、メールアドレスの確認機能もついております。
未記入があった場合別ページでお知らせするのではなくて、同じページ内にて知らせてくれるという事も便利だと思います。
まずは、デモを用意しましたので、見てください。
このように未入力だったり、必須項目にエラーがあった場合に知らせてくれる機能がついております。
早速ですが、下記のソースを記載致します。
今回使用する、スタイルシートは、
index.css
以上の1つです。
scriptは、
mail_error_check.js
jquery.easing.1.3.js
以上の2つを使用します。（jquery.easing.1.3.jsは、編集する必要が無いので、ファイルを置いとくだけで大丈夫です。）
以下がindex.htmlのファイルです。
index.htmlファイル
<!DOCTYPE html>
<html lang="ja">
<head>
<title>jQuery-メールフォーム作成</title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<div id="wrapper">
<form method="post" action="#">
<div id="commentForm">
<div class="bottom">
<div class="background">お申込者さま情報</div>
<div class="set">
<div class="left"><span>お名前</span></div>
<div class="right"><span><input type="text" id="name01" name="お名前" value="" title="name:" class="validate required"/></span></div>
</div><!--set-->
<div class="set">
<div class="left"><span>性別</span></div>
<div class="right">
<span class="check_type"><input type="radio" name="性別" value="男性" id="men" class="validate required"><label for="men">男性</label>
<input type="radio" name="性別" value="女性" id="woman"><label for="woman">女性</label></span></div>
</div><!--set-->
<div class="set">
<div class="left"><span>メールアドレス</span></div>
<div class="right"><span><input type="text" id="mail01" name="メールアドレス" value="" title="Email" class="validate mail required" /><span></div>
</div><!--set-->
<div class="set">
<div class="left"><span>メールアドレス確認</span></div>
<div class="right"><span><input type="text" id="mail02" name="メールアドレス確認" value="" title="Email2:" class="validate mail mail_check required" /></span></div>
</div><!--set-->
<div class="set">
<div class="left"><span>お電話番号</span></div>
<div class="right"><span><input type="text" id="tel01" name="お電話番号" value="" title="Tel:" class="validate required" /></span></div>
</div><!--set-->
<div class="set">
<div class="left_text"><span>ご質問内容</span></div>
<div class="right_text"><span><textarea id="text" name="ご質問内容" title="message:"></textarea></span></div>
</div><!--set-->
<div class="set">
<input type="submit" value=" -送信- " />
<input type="reset" value=" -クリア- " />
</div><!--set-->
</div><!--bottom-->
</div><!--commentForm-->
</form>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/mail_error_check.js"></script>
</body>
</html>
次に、スタイルシートです。
index.css
body {
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
background-color: #fff;
margin:0 auto;
font-size: 16px;
width: 100%;
}
#wrapper{
width:783px;
margin:50px auto;
position:relative;
}
/*========commentForm=========*/
/* form大枠 */
#commentForm {
width: 100%;
border: 2px solid #d6d6d6;
}
/* タイトル部分に使用 */
#commentForm div.bottom{
margin-bottom: 10px;
}
/* タイトル部分に使用 */
#commentForm div.background{
background-color: #d27cff;
padding: 0 5px;
height: 30px;
line-height: 30px;
}
/* 列の開始設定 */
#commentForm div.set{
padding: 5px 40px;
}
/* テキストの開始設定 */
#commentForm span{
padding: 0 10px;
}
/* チャックボックスの間隔設定 */
#commentForm span.check_type{
padding: 0 5px;
}
/* float設定 */
#commentForm div.left_text,
#commentForm div.right_text,
#commentForm div.left,
#commentForm div.right{
float:left;
}
/* ご質問内容以外高さ設定 */
#commentForm div.left,
#commentForm div.right{
height: 50px;
padding-top: 10px;
}
/* ご質問内容の高さ設定 */
#commentForm div.left_text,
#commentForm div.right_text{
height: 150px;
border-bottom: 1px solid #666;
}
/* 項目部分（レフト箇所）の設定 */
#commentForm div.left_text,
#commentForm div.left{
width:200px;
background-color: #f0ebdf;
border-top: 1px solid #666;
border-left: 1px solid #666;
border-right: 1px solid #666;
}
/* 入力部分（ライト箇所）の設定 */
#commentForm div.right_text,
#commentForm div.right{
width:500px;
border-top: 1px solid #666;
border-right: 1px solid #666;
}
/* ご質問内容の部分設定 */
#commentForm textarea {
width: 85%;
height: 120px;
margin-top: 10px;
}
/* input type="text"部分設定 */
#commentForm input#name01,
#commentForm input#mail01,
#commentForm input#mail02,
#commentForm input#tel01{
width: 50%;
}
/*========//commentForm=========*/
/* メールフォーム必須エラー箇所部分
----------------------------------------------- */
.error input ,
.error textarea ,
.error label {
background:#FFCCCC;
}
.error input ,
.error textarea {
margin-left:10px;
}
* html div.error label {
background:none;
}
*+html div.error label{
background:none;
}
p.error{
margin:0;
color:red;
font-weight:bold;
margin-top :-30px;
padding: 0 10px;
}
最後にjsファイルです。
mail_error_check.js
$(function(){
$("form").submit(function(){
//エラーの初期化
$("p.error").remove();
$("div").removeClass("error");
$(":text,textarea").filter(".validate").each(function(){
//必須項目のチェック
$(this).filter(".required").each(function(){
if($(this).val()==""){
$(this).parent().prepend("<p class='error'>必須項目です</p>")
}
})
//数値のチェック
$(this).filter(".number").each(function(){
if(isNaN($(this).val())){
$(this).parent().prepend("<p class='error'>数値のみ入力可能です</p>")
}
})
//メールアドレスのチェック
$(this).filter(".mail").each(function(){
if($(this).val() && !$(this).val().match(/.+@.+\..+/g)){
$(this).parent().prepend("<p class='error'>メールアドレスの形式が異なります</p>")
}
})
//メールアドレス確認のチェック
$(this).filter(".mail_check").each(function(){
if($(this).val() && $(this).val()!=$("input[name="+$(this).attr("name").replace(/^(.+)確認$/, "$1")+"]").val()){
$(this).parent().prepend("<p class='error'>メールアドレスと内容が異なります</p>")
}
})
})
//ラジオボタンのチェック
$(":radio").filter(".validate").each(function(){
$(this).filter(".required").each(function(){
if($(":radio[name="+$(this).attr("name")+"]:checked").size() == 0){
$(this).parent().prepend("<p class='error'>選択してください</p>")
}
})
})
//チェックボックスのチェック
$(".checkboxRequired").each(function(){
if($(":checkbox:checked",this).size()==0){
$(this).prepend("<p class='error'>選択してください</p>")
}
})
// その他項目のチェック
$(".validate.add_text").each(function(){
if($(this).attr("checked")==true && $("input[name="+$(this).attr("name").replace(/^(.+)$/, "$1_text")+"]").val()==""){
$(this).prepend("<p class='error'>その他の項目を入力してください。</p>")
}
})
//エラーの際の処理
if($("p.error").size() > 0){
$('html,body').animate({ scrollTop: $("p.error:first").offset().top-40 }, 'slow');
$("p.error").parent().addClass("error");
return false;
}
})
})
以上で完成します。
まとめ
必須項目を設定するには、
class=”validate required”を入れてあげれば必須になります。
メールアドレス入力箇所には、
class=”validate mail required”こちらを入れます。
メールアドレス確認入力箇所には、
class=”validate mail mail_check required”こちらを入れます。
もっと細かな詳細は、今回参考にしたサイトがありますのでこちらも参考にしてみてください。
ASCII.jp：jQueryでバリデーション付きメールフォームを作ろう (1/3)｜Web制作の現場で使えるjQuery UIデザイン入門
今回デモで使用したファイルをUPしときましたので、
よかったら参考にしてみてください。
今回の記事がもし参考になりましたら、ブログランキングにご協力ください。
よろしくお願いします。
関連記事
-
-
jquryで問い合わせフォームのデザインを作ってみた。
今回は、jquryで問い合わせフォームを作ってみました。 問い合わせフォー
-
-
ボタンを押すとコンテンツが現れる方法。スライドパネル。
今回は、ボタンを押すとコンテンツが現れる方法を調べてみました。 ボタン押すと下にコンテンツが現
-
-
背景に画像をフルスクリーンさせる方法。 maximageを使用。
今回は、背景画像をフルスクリーンにし、なおかつ、スライダーする方法について、調べてみました。
-
-
-jQuery-送信ボタン1度しか押せないようにする方法
今回は、ボタンを一度クリックしたら、押せないようにする方法をしてみました。 問い合わせ
-
-
ページトップへスクロールする方法。
今回は、スクロールしたら、top（一番上）にいく方法を調べてみました。 コンテンツが、縦長にな
-
-
“html”このタグの中になんのタグを入れれるんだっけ？
今回は、このタグの中になんのタグを入れれるんだっけ？ という記事を見つけたので、ご紹介したいと思い
-
-
テキストの縦位置を設定する。line-height:を使用する。
今回は、テキストの間隔について書きたいと思います。 テキストを書くときテキストの縦位置が気にな
-
-
-jQuery-チェックをつけないとボタンが押せなくする方法
今回は、チェックボックスにチェックをつけないとボタンを押せないようにする方法を作成してみました。
-
-
メニューをプルダウンする方法。globalNaviを使用。
今回は、メニューをプルダウンさせる方法について調べてみました。 メニューをたくさんあると、
-
-
animationでboxを動かしてみた。
今回は、animationを使って、boxを動かしてみました。 マウスを乗せたときに指定したb
