*

-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

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

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

記事を読む

no image

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

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

記事を読む

no image

テキストの縦位置を設定する。line-height:を使用する。

今回は、テキストの間隔について書きたいと思います。 テキストを書くときテキストの縦位置が気にな

記事を読む

no image

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

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

記事を読む

no image

htmlの書き方について。

ホームページを作成するのには、flashを除けばほとんどhtmlで書きます。 ホームページがた

記事を読む

no image

jqueryを使って画像を拡大・縮小させる。

今回は、画像を拡大・縮小させるという事をやってみました。 前回は、画像を回転させるという事をや

記事を読む

no image

jquryで問い合わせフォームのデザインを作ってみた。

今回は、jquryで問い合わせフォームを作ってみました。   問い合わせフォー

記事を読む

no image

-jQuery-自動で画像のフェードイン・フェードアウトをする方法

今回は、自動で画像を切り替える方法について調べてみました。 (フェイドイン・フェイドアウトのみ)

記事を読む

no image

animationでboxを動かしてみた。

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

記事を読む

no image

スクロールしても固定されるコンテンツの作成方法。(“jquery”box-fixed.jsを使用。)

今回は、スクロールしても一部分が固定されるという事をしてみました。 まずは、デモを見てください。

記事を読む

Message

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

PAGE TOP ↑