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

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

jQuery

61-18)　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-18）　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
郵便番号postcode
(郵便番号の住所を表示する）
　　　　　　　　　　　　　 　　　郵便番号を調べる
必須ご住所address
  1. 都道府県
  2. 市区町村
  3. 丁目番地
必須ご用件inquiry body