<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload = function(){ //郵便番号を全角から半角に置換 document.frm1.zip1.onblur = function(){ document.frm1.zip1.value = toHankakuNum(document.frm1.zip1.value); //数字以外は削除 var reg = new RegExp("[^0-9]","gi"); document.frm1.zip1.value = document.frm1.zip1.value.replace(reg, ""); if(document.frm1.zip1.value.length != 3){ alert("3文字で入力してください"); var reg = new RegExp("^([0-9]{3}).+$","gi"); if(document.frm1.zip1.value.length > 3){ document.frm1.zip1.value = document.frm1.zip1.value.replace(reg, "$1"); } } } document.frm1.zip2.onblur = function(){ document.frm1.zip2.value = toHankakuNum(document.frm1.zip2.value); //数字以外は削除 var reg = new RegExp("[^0-9]","gi"); document.frm1.zip2.value = document.frm1.zip2.value.replace(reg, ""); if(document.frm1.zip2.value.length != 4 && document.frm1.zip2.value.length > 0){ alert("4文字で入力してください"); var reg = new RegExp("^([0-9]{4}).+$","gi"); if(document.frm1.zip2.value.length > 4){ document.frm1.zip2.value = document.frm1.zip2.value.replace(reg, "$1"); } } } document.frm1.onsubmit = function(){ //性別が選択されているかチェック var genderNull = true; A: for(var i = 0; i < document.frm1.gender.length; i++){ if(document.frm1.gender[i].checked == true){ genderNull = false; break A; } } //どこのサイトか選択されているかチェック var whereNull = true; B: for(var i = 0; i < document.frm1.where.length; i++){ if(document.frm1.where[i].checked == true){ whereNull = false; break B; } } if(document.frm1.name.value == ""){ alert("お名前が未入力です") } else if(document.frm1.inquiry.value == ""){ alert("お問い合わせ内容が未入力です") } else if(genderNull == true){ alert("性別を選択してください"); } else if(whereNull == true){ alert("どこでこのサイトを知ったか選択してください"); } //メールアドレスが入力されていて、メールアドレスのチェック else if(!document.frm1.mail.value.match(/^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/) && document.frm1.mail.value != ""){ alert("メールアドレスが正しくありません"); } //メールアドレスが入力されていて、メールアドレスと確認メールアドレスが異なっているとき else if((document.frm1.mail.value != document.frm1.mail_check.value) && document.frm1.mail.value != ""){ alert("メールアドレスが異なっています。"); } //その他にチェックしたとき内容が入力されているかチェック else if(document.getElementById("etc").checked == true && document.getElementById("etc_text").value == ""){ alert("その他の内容をお書きください") } else{ //送信確認 if(window.confirm("送信しますか")){ alert("送信しました"); document.frm1.submit(); } else{ alert("送信しませんでした"); } } return false; } } function toHankakuNum(motoText){ han = "0123456789.,-+"; zen = "0123456789.,-+"; str = ""; for (i=0; i<motoText.length; i++) { c = motoText.charAt(i); n = zen.indexOf(c,0); if (n >= 0) c = han.charAt(n); str += c; } return str; } </script> <style type="text/css"> #container{ width:600px; margin:0 auto; padding:20px; background:white; } h1{ margin-top:20px; font-size:large; color:#7CADB6; } dl dt { border-left:5px solid #7CADB6; border-bottom:1px solid #7CADB6; font-size:small; margin:0; padding:5px; } dl dt span{ color:red; font-weight:bold; } dl dd{ font-size:small; margin:0; padding:10px; } dl dd p.error{ margin:0; color:red; font-weight:bold; margin-bottom:1em; } dl dd.error input, dl dd.error textarea, dl dd.error label{ background:#FFCCCC; } /*ラベルの背景にも色を付ける処理*/ dl dd input{ position:relative; z-index:2; } dl dd label{ position:relative; padding:5px 5px 5px 25px; margin : 0 5px 0 -25px; margin-left:-25px; position:relative; z-index:1; } </style> </head> <body> <div id="container"> <h1>当サイトへのお問い合わせ</h1> <form name="frm1" id="frm1" action="http://www.yahoo.co.jp" method="POST"> <dl> <dt>お名前<span>※</span></dt> <dd><input type="text" name="name" id="name" size="80" class="validate required"></dd> <dt>フリガナ</dt> <dd><input type="text" name="furi" id="furi" size="80"></dd> <dt>郵便番号</dt> <dd><input type="text" name="zip1" id="zip1" size="5" class="validate number"> - <input type="text" name="zip2" size="7" class="validate number"></dd> <dt>メールアドレス</dt> <dd><input type="text" value="" size="80" name="mail" id="mail" class="validate mail"></dd> <dt>メールアドレス(確認)</dt> <dd><input type="text" value="" size="80" name="mail_check" id="mail_check" class="validate mail mail_check"></dd> <dt>性別<span>※</span></dt> <dd> <input type="radio" value="男性" name="gender" id="man" class="validate required"> <label for="man">男性</label> <input type="radio" value="女性" name="gender" id="woman"><label for="woman">女性</label> </dd> <dt>どこでこのサイトを知りましたか?<span>※</span></dt> <dd class="checkboxRequired"> <input type="checkbox" name="where" id="search" value="search"> <label for="search">検索エンジン</label> <input type="checkbox" name="where" id="freiend" value="freiend"> <label for="freiend">知人の紹介</label> <input type="checkbox" name="where" id="mail_magazine" value="mail_magazine"> <label for="mail_magazine">メルマガ</label> <input type="checkbox" name="where" value="etc" id="etc" class="validate add_text"> <label for="etc">その他</label> <input type="text" name="etc_text" id="etc_text" value=""> </dd> <dt>お問い合わせ内容<span>※</span></dt> <dd> <textarea id="inquiry" name="inquiry" rows="10" cols="60" class="validate required"></textarea> </dd> </dl> <p><input type="submit" value="送信"></p> </form> </div> </body> </html>