-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しときましたので、
よかったら参考にしてみてください。
今回の記事がもし参考になりましたら、ブログランキングにご協力ください。
よろしくお願いします。
関連記事
-
-
HP作成に必要なもの。
今週は、ブログの更新が遅くなりました。 今作業している内容では、ネタがないという理由で更新がな
-
-
-jQuery-自動で画像のフェードイン・フェードアウトをする方法
今回は、自動で画像を切り替える方法について調べてみました。 （フェイドイン・フェイドアウトのみ）
-
-
htmlの書き方について。
ホームページを作成するのには、flashを除けばほとんどhtmlで書きます。 ホームページがた
-
-
“html”このタグの中になんのタグを入れれるんだっけ？
今回は、このタグの中になんのタグを入れれるんだっけ？ という記事を見つけたので、ご紹介したいと思い
-
-
海外サイトのかっこいいサイト集。
サイトを作成するにあたってもっとも大切なものは、想像力だとおもいます。 デザイナーの方などは特
-
-
ボタンを押すとコンテンツが現れる方法。スライドパネル。
今回は、ボタンを押すとコンテンツが現れる方法を調べてみました。 ボタン押すと下にコンテンツが現
-
-
スクロールしても固定されるコンテンツの作成方法。(“jquery”box-fixed.jsを使用。)
今回は、スクロールしても一部分が固定されるという事をしてみました。 まずは、デモを見てください。
-
-
jqueryを使って画像を拡大・縮小させる。
今回は、画像を拡大・縮小させるという事をやってみました。 前回は、画像を回転させるという事をや
-
-
スクロールバーのカスタマイズ。jScrollPaneを使用してみました。
今回は、スクロールバーのカスタマイズに取り組んでみました。 サイトにスクロ
-
-
jqueryを使って画像を回転させる。jQueryRotateを使用
今回は、画像を回転させるという事をやってみました。 調べてみたところ、jqueryを使って簡単
