2011年11月11日金曜日

入力チェック、エラーはまとめて表示

<script src="formCheck.js" type="text/javascript"></script>
<script type="text/javascript">
 <!--
    fld = new Array();
    fld['zip'] = "required";
    fld['pref'] = "required";
    fld['addr'] = "required";
    fld['addr2'] = "required";
    fld['j_sei'] = "required";
    fld['j_mei'] = "required";
    fld['j_seikana'] = "required";
    fld['j_meikana'] = "required";
    fld['p_sei'] = "required";
    fld['p_mei'] = "required";
    fld['school'] = "required";
    fld['gakunen'] = "required";

    fld['mail'] = "mail";
    fld['tel'] = "tel";
    fld['mobile'] = "mobile";
    reqcolor = "#ffe5f2";
    encolor = "#ffffff";
 -->
</script>

●bodyタグ内

<form id="sports" method="post" action="xxxxxx.asp" onsubmit="return FormCheck(fld,reqcolor,encolor)">
<table>
<tr>
<td>ご自宅の郵便番号</td>
<td colspan="2"><input type="text" name="zip" onkeyup="AjaxZip2.zip2addr(this,'pref','addr',null,'addr');" class="imeoff" title="郵便番号を入力してください" />&nbsp;半角、ハイフン不要</td>
</tr>
<tr>
<td rowspan="3" class="tate">ご自宅の住所</td>
<td>都道府県</td>
<td><input type="text" name="pref" size="8" title="都道府県を入力してください" /></td>
</tr>
<tr>
<td>市区町村</td>
<td><input type="text" name="addr" size="40" title="市区町村を入力してください" /></td>
</tr>
<tr>
<td>他住所</td>
<td><input type="text" name="addr2" size="60" title="他住所を入力してください" /></td>
</tr>
<tr>
<td class="tate">受験生のお名前</td>
<td>姓<br />姓(フリガナ)</td>
<td><input type="text" name="j_sei" size="20" class="imeon" title="姓を入力してください" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名<span class="white">(フリガナ)</span>&nbsp;<input type="text" name="j_mei" size="20" class="imeon" title="名を入力してください" /><br />
<input type="text" name="j_seikana" size="20" class="imeon" title="姓(カナ)を入力してください" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名(フリガナ)&nbsp;<input type="text" name="j_meikana" size="20" class="imeon" title="名(カナ)を入力してください" /></td>
</tr>
<tr>
<td>保護者のお名前</td>
<td>姓</td>
<td><input type="text" name="p_sei" size="20" class="imeon" title="保護者姓を入力してください" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名<span class="white">(フリガナ)</span>&nbsp;<input type="text" name="p_mei" size="20" class="imeon" title="保護者名を入力してください" /></td>
</tr>
<tr>
<td>電話番号</td>
<td colspan="2"><input type="text" name="tel" size="18" class="imeoff" title="電話番号を入力してください" />&nbsp;半角、例:06-xxxx-xxxx</td>
</tr>
<tr>
<td>携帯番号</td>
<td colspan="2"><input type="text" name="mobile" size="18" class="imeoff" title="携帯番号を入力してください" />&nbsp;半角、例:090-xxxx-xxxx</td>
</tr>
<tr>
<td class="tate">E-Mail アドレス</td>
<td colspan="2"><input type="text" name="mail" size="60" class="imeoff" title="PCメールアドレスを入力してください" /><br />
<span class="msg">半角、パソコンでご利用のアドレスをご記入ください。</span>
</td>
</tr>
<tr>
<td>在学校名</td>
<td colspan="2"><input type="text" name="school" size="60" title="在学校名を入力してください" /></td>
</tr>

<tr>
<td>学年</td>
<td><input type="text" name="gakunen" size="2" class="imeoff" title="学年を入力してください" />&nbsp;年</td>
<td>&nbsp;</td>
</tr>

</table>
<p class="waku1">
<input type="button" value="リセット" onclick="location.reload()" />
<input type="submit" name="kakunin" value="登録内容確認" /></p>
</form>

●参照するformCheck.jsの構文

//呼び出し用
function FormCheck(fld,reqcolor,encolor){
rcolor = reqcolor;
ecolor = encolor;
var msg = "";
for (key in fld){
if((fld[key] == "radio") || (fld[key] == "check_many")){
var tes = document.getElementsByName(key);
msg += Check(tes,key,fld[key],rcolor,encolor);
}else{
var tes = document.getElementsByName(key).item(0);
msg += Check(tes,key,fld[key],rcolor,encolor);
}
}
//msgが空白のままだったらすべて入力されている
if(msg == ""){
return true;
}else{
alert(msg);//未入力の項目を指摘するアラートを表示
return false;
}
}

//入力チェック
function Check(elm,name,func,rcolor,encolor){
var m = "";
//var i = 0;//ループ用変数(チェックボックスやラジオボタンを使う場合)
//文字数指定用
//var ary = func.split(",");
//func = ary[0];
//min  = ary[1];
//max  = ary[2];
//type = ary[3];
switch(func){
case "required":
if(elm.value == ""){//document.form.変数.valueにするとフォームの名前を探しにいくのでエラー
m = elm.getAttribute("title") + "\n";
ChengeColor(elm,rcolor);
}else{
ChengeColor(elm,encolor);
}
break;

case "mail":
if(!elm.value.match(/\w{1,}[@][\w\-]{1,}([.]([\w\-]{1,})){1,3}$/)){//x@x.xx形式じゃなかったら matchが使えない
m = elm.getAttribute("title") + "\n";
ChengeColor(elm,rcolor);
}else{
ChengeColor(elm,ecolor);
}
break;

case "tel":
if(!elm.value.match(/[0-9]+-[0-9]+-+[0-9]+$/)){//xxx-xxx-xxx形式じゃなかったら
m = elm.getAttribute("title") + "\n";
ChengeColor(elm,rcolor);
}else{
ChengeColor(elm,ecolor);
}
break;
       case "mobile":
           if (!elm.value.match(/[0-9]+-[0-9]+-+[0-9]+$/)) {//xxx-xxx-xxx形式じゃなかったら
               m = elm.getAttribute("title") + "\n";
               ChengeColor(elm, rcolor);
           } else {
               ChengeColor(elm, ecolor);
           }
           break;

default: break;
}
return m;
}
//エラーが起こったテキストボックスの色を変える
function ChengeColor(name,color){
name.style.backgroundColor = color;
}

0 件のコメント:

コメントを投稿