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

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

jQuery

61-11) 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の書き方 /*------------------------------------ */
// 61-11) 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>



採用エントリー・送信


  




必須お名前your name  
フリガナassumed name  
性別sex
生年月日brith date 年  月 
必須郵便番号postcode (郵便番号の住所を表示します)      郵便番号を調べる
必須ご住所address
  1. 都道府県
  2. 市区町村
  3. 丁目番地
自宅電話telephone number
携帯電話mobile number
必須メールアドレスmail address
必須確認のためもう一度confirm mail address
連絡方法contact
連絡時間contact time
必須面接希望日reserved date
必須学校名・専攻inquiry body
応募動機inquiry body
必須自己PRinquiry body

※応募秘密は厳守いたします。

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