-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しときましたので、
よかったら参考にしてみてください。
今回の記事がもし参考になりましたら、ブログランキングにご協力ください。
よろしくお願いします。
関連記事
-
-
マウスオーバーした時に画像を半透明にする。”opacity”を使用する。
今回は、マウスオーバーをした際に半透明にするという事を調べてみました。 マウスオーバーをし
-
-
-jQuery-スクロールしたらあとからついてくるコンテンツの作成方法
今回は、スクロールしてもあとからついてくるコンテンツを作成してみました。 スクロールしたら
-
-
-jQuery-自動で画像のフェードイン・フェードアウトをする方法
今回は、自動で画像を切り替える方法について調べてみました。 （フェイドイン・フェイドアウトのみ）
-
-
スクロールしても固定されるコンテンツの作成方法。(“jquery”box-fixed.jsを使用。)
今回は、スクロールしても一部分が固定されるという事をしてみました。 まずは、デモを見てください。
-
-
背景画像をjqueryを使用して、フルスクリーンで動かす方法。backgroundPositionを使用。
今回は、背景画像をjqueryを使って、動かすという事をしてみました。 背景画像はアメニーショ
-
-
jquryで問い合わせフォームのデザインを作ってみた。
今回は、jquryで問い合わせフォームを作ってみました。 問い合わせフォー
-
-
テキストがアコーディオンのように開く。
今回は、テキストをアコーディオンのように開く方法について調べてみました。 ページが読み込まれた
-
-
スクロールバーのカスタマイズ。jScrollPaneを使用してみました。
今回は、スクロールバーのカスタマイズに取り組んでみました。 サイトにスクロ
-
-
jqueryを使って画像を回転させる。jQueryRotateを使用
今回は、画像を回転させるという事をやってみました。 調べてみたところ、jqueryを使って簡単
-
-
海外サイトのかっこいいサイト集。
サイトを作成するにあたってもっとも大切なものは、想像力だとおもいます。 デザイナーの方などは特
