copyright

株式会社アイネックスはソフトウェアの開発、検証ツールの支援企業です。

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

jQuery

61-01)　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　）

入力データを完了(送信)後、php経由で擬似送信する。

jQueryの書き方 /*------------------------------------ */
//　61-01）　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;
}
});
ｃｓｓの書き方 ------------------
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>

お問い合わせ画面

必須メールアドレスmail address
必須確認のためもう一度confirm mail address
会社名company
必須お名前your name 　
フリガナassumed name 　
性別sex
電話番号telephone number
ＦＡＸ番号fax number
携帯番号mobile number
必須郵便番号postcode (郵便番号の住所を表示します）　　　　　 郵便番号を調べる
必須ご住所address
  1. 都道府県
  2. 市区町村
  3. 丁目番地
アンケートにご協力を
お願いします。questionnaire

アンケートにご協力ありがとうございました。
必須ご用件inquiry body

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