<style type="text/css">
span#nickname_err,
span#password_err,
span#sex_err,
span#junk_err,
span#job_err,
span#message_err {
display:none;
color:red;
padding-right:20px;
font-size:.8em;
}
span#nickname_hint,
span#password_hint,
span#sex_hint,
span#junk_hint,
span#job_hint,
span#message_hint {
display:none;
color:blue;
padding-right:20px;
font-size:.8em;
}
#frm_form2 dt{
margin:10px 0;
float:left;
clear:both;
width:15em;
}
#frm_form2 dd{
padding:0 0 0 15em;
margin:10px 0;
}
</style>
<script type="text/javascript">
function fShowHint(id,on){
var spanObj="";
alert(id.indexOf("junk_"));
if(id.indexOf("junk_")==0){
spanObj=document.getElementById("junk_hint");
}else if(id.indexOf("sex_")==0){
spanObj=document.getElementById("sex_hint");
}else{
document.getElementById(id+"_hint");
}
if(on==1){
spanObj.style.display="block";
}else{
spanObj.style.display="none";
}
}
function chk(){
var elms=["nickname","password","sex","junk","job","message"];
var err=0;
for(var e in elms){
var id=elms[e];
switch(id){
case "nickname":
case "password":
case "message":
if(!document.getElementById(id).value){
err++;
document.getElementById(id+"_err").style.display="block";
}
break;
case "sex":
for(var i=1,j=0; i<=2; i++){
if(document.getElementById(id+"_"+i).checked==true) j++;
}
if(j==0){
err++;
document.getElementById(id+"_err").style.display="block";
}
break;
case "junk":
break;
case "job":
break;
default:
break;
}
}
alert(err);
if(err>0){
return false;
}else{
return true;
}
}
</script>
<form action="/content/demo/test.php" method="post" onsubmit="return chk();" id="frm_form2">
<dl>
<dt><label for="nickname">ニックネーム</label></dt>
<dd>
<input type="text" name="nickname" id="nickname" onfocus="fShowHint(this.id,1)" onblur="fShowHint(this.id,0)" />
<span id="nickname_hint">※ニックネームは半角英数字で、5文字～20文字まで入力できます。</span>
<span id="nickname_err">※ニックネームを入力してください。</span>
</dd>
<dt><label for="password">パスワード</label></dt>
<dd>
<input type="password" name="password" id="password" onfocus="fShowHint(this.id,1)" onblur="fShowHint(this.id,0)" />
<span id="password_hint">※パスワードは半角英数字で、8文字～20文字まで入力できます。</span>
<span id="password_err">※パスワードを入力してください。</span>
</dd>
<dt>あなたの性別は？</dt>
<dd>
<label for="sex1"><input type="radio" name="sex" id="sex1" value="male" onfocus="fShowHint(this.id,1)" onblur="fShowHint(this.id,0)" /> 男</label>
<label for="sex2"><input type="radio" name="sex" id="sex2" value="female" onfocus="fShowHint(this.id,1)" onblur="fShowHint(this.id,0)" /> 女</label>
<span id="sex_hint">※性別を1つ選択してください。</span>
<span id="sex_err">※性別を1つ選択してください。</span>
</dd>
<dt>よくいくファーストフード店は？</dt>
<dd>
<label for="junk_1"><input type="checkbox" name="junk_1" id="junk_1" value="mac" onfocus="fShowHint(this.id,1)" onblur="fShowHint(this.id,0)" />マクドナルド</label>
<label for="junk_2"><input type="checkbox" name="junk_2" id="junk_2" value="kfc" onfocus="fShowHint(this.id,1)" onblur="fShowHint(this.id,0)" />ケンタッキー</label>
<label for="junk_3"><input type="checkbox" name="junk_3" id="junk_3" value="mos" onfocus="fShowHint(this.id,1)" onblur="fShowHint(this.id,0)" />モスバーガー</label>
<label for="junk_4"><input type="checkbox" name="junk_4" id="junk_4" value="freshness" onfocus="fShowHint(this.id,1)" onblur="fShowHint(this.id,0)" />フレッシュネスバーガー</label>
<label for="junk_5"><input type="checkbox" name="junk_5" id="junk_5" value="lotteroa" onfocus="fShowHint(this.id,1)" onblur="fShowHint(this.id,0)" />ロッテリア</label>
<label for="junk_6"><input type="checkbox" name="junk_6" id="junk_6" value="other" onfocus="fShowHint(this.id,1)" onblur="fShowHint(this.id,0)" />その他のファーストフード店</label>
<span id="junk_hint">※複数選択可。該当する選択肢がない場合は、「その他のファーストフード店」を選択してください。</span>
<span id="junk_err">※よくいくファーストフード店を選択してください。該当する選択肢がない場合は、「その他のファーストフード店」を選択してください。</span>
</dd>
<dt><label for="job">あなたの職業は？</label></dt>
<dd>
<select id="job" name="job" onfocus="fShowHint(this.id,1)" onblur="fShowHint(this.id,0)" />
<option value="" selected="selected">▼ひとつ選択してください</option>
<option value="government-employee">公務員</option>
<option value="manager">経営者・役員</option>
<option value="company-employee">会社員</option>
<option value="self-employed">自営業</option>
<option value="free-lance">自由業</option>
<option value="housewife">専業主婦</option>
<option value="part-time">パート・アルバイト</option>
<option value="student">学生</option>
<option value="other">その他</option>
</select>
<span id="job_hint">※職業を1つ選択してください。</span>
<span id="job_err">※職業を1つ選択してください。</span>
</dd>
<dt><label for="message">メッセージ</label></dt>
<dd>
<textarea id="message" name="message" cols="50" rows="5" onfocus="fShowHint(this.id,1)" onblur="fShowHint(this.id,0)"></textarea>
<span id="message_hint">※ご自由にお書きください。</span>
<span id="message_err">※メッセージを入力してください。</span>
</dd>
</dl>
<p>
<input type="submit" value="送信" />
</p>
</form>