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

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

jQuery

51-16) 1. バリデーション付きのメールフォーム

 

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

1.必須項目のチェック(class属性が required )
2.数値チェック(class属性が number )
3.メールアドレスチェック(class属性が mail )
4.ラジオボタンの必須チェック(class属性が validate , required )
5.チェックボックスの必須チェック(class属性が checkboxRequired )

jQueryの書き方 /*------------------------------------ */
// 51-16) 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の書き方 ------------------

お問い合わせ画面

必須お名前 :name  
フリガナ :name  
郵便番号 :post code   -
必須メールアドレス :mail address  
必須メールアドレス(確認) :confirm mail address  
性別 :sex  
必須どこでこのサイトを知りましたか? :web site  


必須コメント(全角) :comment