株式会社アイネックスはソフトウェアの開発、ホームページの作成ツール企業です。

     横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。

jQuery

51-51) 1. お問い合わせ・送信(浜畑)

 

データ入力時に、メールフォームのチェックを行なう。

1.  必須項目のチェック(class属性が required )
1-1.ご住所の必須チェック(class属性が validate , required )
1-2.ご用件の必須チェック(class属性が validate , required )
2.  自動入力
2-1.郵便番号の入力で住所の自動表示(class属性が post )
2-2.お名前の入力でふり仮名の自動表示(class属性が keyup1、keyup2 )
3.  個別チェック
3-1.数値チェック(class属性が number )
3-2.メールアドレスチェック(class属性が mail )
3-3.電話番号チェック(class属性が tel )

入力データを確認後、cgi経由で送信する。

jQueryの書き方 /*------------------------------------ */
// 51-51) 1. 汎用的なバリデーション機能
/*------------------------------------ */
$("form").submit(function(){
//エラーの初期化
$("p.error").remove();
$("dl dd").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(/^(.+)_check$/, "$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).parent().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;
}
});
cssの書き方 ------------------
HTMLの書き方 <!------------------------------------------------------->
<!-- お問合わせ 画面 -->
<!------------------------------------------------------->
<table class="mailform" summary="mailform main">

<tr>
<th><img src="images/mfp_must.gif" alt="必須" class="must" />メールアドレス<span>mail address</span></th>
<td><input type="text" name="メールアドレス" size="40" class="validate email required" /></td>
</tr>
<tr>
<th><img src="images/mfp_must.gif" alt="必須" class="must" />確認のためもう一度<span>confirm mail address</span></th>
<td><input type="text" name="メールアドレス_check" size="40" class="validate email email_check required" /></td>
</tr>

-------    省略 ---------

<tr>
<th><img src="images/mfp_must.gif" alt="必須" class="must" />ご用件<span>inquiry body</span></th>
<td><textarea name="ご用件" rows="10" cols="60" class="validate required"></textarea></td>
</tr>

</table>



お問い合わせ・送信


  




必須利用規約の同意user policy  利用規約 に同意します
必須メールアドレスmail address
必須確認のためもう一度confirm mail address
会社名company
必須お名前your name  
フリガナassumed name
電話番号telephone number
携帯番号mobile number
必須 郵便番号postcode (郵便番号の住所を表示します)   郵便番号を調べる
必須ご住所address
  1. 都道府県
  2. 市区町村
  3. 丁目番地
必須ご依頼メディアmedia




必須ディスク容量capacity
使用機器(デジカメ等)use equipment
必須症状symptom



--------------------------------------------------

   (詳細 現象発生後に実施されたことも含めて記載してください)

ご希望連絡方法contacting
他送付物attachments
返却メディアreturn

領収書receipt
必須個人情報の保護protection
アンケートにご協力を
お願いします。questionnaire

  アンケートにご協力ありがとうございました。

※各種SDカードのメディアを同梱してお送りいただければ、
そちらにデータをコピーさせて頂きます (SDカードに限ります)
新品のSDカードの場合、通常ご使用となる機器(デジカメなど)にて、削除可のデータ(写真等)を1つ入れてください。
お客様にご準備頂いた場合でも、対象メディアが16GB以下の場合は、費用は変りません
復旧不可と判断した場合には、送料着払いにてご返却いたします(初めの1回のみ送料は当社が負担いたします)
ご依頼品などのご返送はご記載いただいたご依頼者の住所へ返送させていただきます
送付業者は当社にて選択させていただきますのでご了承願います

※個人情報は弊社にて適切に管理し、一定期間経過後に破棄します