*

-jQuery-メールアドレス入力確認付メールフォーム

公開日: : css3, html5, jquery, 未分類

今回は、jQueryを使ってメールフォーム(メールアドレス入力確認付)を作成してみました。

mail

必須項目や、メールアドレスの確認機能もついております。

未記入があった場合別ページでお知らせするのではなくて、同じページ内にて知らせてくれるという事も便利だと思います。

まずは、デモを用意しましたので、見てください。

demo

このように未入力だったり、必須項目にエラーがあった場合に知らせてくれる機能がついております。

早速ですが、下記のソースを記載致します。

今回使用する、スタイルシートは、
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 Pゴシック", "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しときましたので、
よかったら参考にしてみてください。
download

今回の記事がもし参考になりましたら、ブログランキングにご協力ください。
よろしくお願いします。


関連記事

no image

背景に画像をフルスクリーンさせる方法。 maximageを使用。

今回は、背景画像をフルスクリーンにし、なおかつ、スライダーする方法について、調べてみました。

記事を読む

no image

ページトップへスクロールする方法。

今回は、スクロールしたら、top(一番上)にいく方法を調べてみました。 コンテンツが、縦長にな

記事を読む

no image

テキストがアコーディオンのように開く。

今回は、テキストをアコーディオンのように開く方法について調べてみました。 ページが読み込まれた

記事を読む

no image

animationでboxを動かしてみた。

今回は、animationを使って、boxを動かしてみました。 マウスを乗せたときに指定したb

記事を読む

no image

本日からblogを書きます。

初めまして。   私は、WEB会社に勤めており、ホームページ作成の仕事をしてお

記事を読む

no image

-jQuery-スクロールしたらあとからついてくるコンテンツの作成方法

今回は、スクロールしてもあとからついてくるコンテンツを作成してみました。 スクロールしたら

記事を読む

no image

jqueryを使って画像を回転させる。jQueryRotateを使用

今回は、画像を回転させるという事をやってみました。 調べてみたところ、jqueryを使って簡単

記事を読む

no image

背景画像をjqueryを使用して、フルスクリーンで動かす方法。backgroundPositionを使用。

今回は、背景画像をjqueryを使って、動かすという事をしてみました。 背景画像はアメニーショ

記事を読む

no image

スクロールバーのカスタマイズ。jScrollPaneを使用してみました。

今回は、スクロールバーのカスタマイズに取り組んでみました。   サイトにスクロ

記事を読む

no image

背景画像だけ透明にしたい。background-color:rgbaを使う。

今回は、背景画像だけを透明にしてみました。 背景の上に透明な色を乗せたいや、テキストを書く要素

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PAGE TOP ↑