寂しく一人作業していてちょっと躓いていたアホみたいな問題が解決し、嬉しくてエントリー(笑)。正直javascriptはあまり詳しくないんですが、ちょっとした入力チェック位なら作れる程度です。で、お問い合せフォームの入力チェックをクライアントサイドで行おうとし、外部ファイルとして下記のscriptを書いたのですが、全然反応しません。
//一番目の入力項目にフォーカスを当てる
function setOnLoad(){
document.form.company_name.focus();
}
// フォームチェック
function formcheck(){
var flag=false;
var message="以下の項目が未入力か入力ミスがあります\n\n";
var name=document.form.name;
var tel=document.form.tel;
var mail=document.form.email;
//名前の入力確認
if(name.value <= 0){
message+="「お名前」が入力されていません\n";
frag= true;
}
//電話番号の入力確認
if(tel.value <= 0){
message+="「電話番号」が入力されていません\n";
flag=true;
}else if(tel.value.search(/[0-9]+[-]+[0-9]+[-]+[0-9]+/i)<0){
message+="「電話番号」はハイフン(-)と半角数字で入力してください\n";
flag=true;
}
//メールアドレスの入力確認
if(mail.value <= 0){
message+="「メールアドレス」が入力されていません\n";
flag=true;
}else if(mail.value.search(/[!-?A-~]+@[!-?a-z0-9]+[.][a-z0-9]+/i)<0){
message+="「メールアドレス」が正しく入力されていません\n";
flag=true;
}
//最終入力判定
if(flag){
window.alert(message);
return false;
}else if(confirm("送信してよろしいですか?")){
return true;
}else{
return false;
}
}
あれ、もしかして1.0strictではname属性使えないんじゃなかったかしらんと思いググってみたらビンゴ!ADPさんの記事にXHTML 1.0 Strictなんかではform要素にname属性は使えない。nameをidに変えるだけでは、JavaScriptのエラーになってしまう。
ってあるじゃないですか。。。負けず嫌いなんで「あぁ、僕の知識じゃ無理か。やっぱ詳しい人間に頼むしかないかぁ」とブルー入ってたのですが、足りない脳みそにピピンと閃きました。「配列」使えばいいんじゃんと。で、下記の通り記述し直したら見事にうまくいきました:-)
//一番目の入力項目にフォーカスを当てる
function setOnLoad(){
document.forms[0].elements[0].focus();
}
// フォームチェック
function formcheck(){
var flag=false;
var message="以下の項目が未入力か入力ミスがあります\n\n";
var name=document.forms[0].elements[1];
var tel=document.forms[0].elements[2];
var mail=document.forms[0].elements[3];
以下略
この位のスクリプトであれば配列を使っても大して面倒じゃないですよね。いや、詳しい人から見れば何言ってんのって感じなのでしょうが、とりあえず今は充実感でいっぱいです(笑)
Comments
これだと一番最初のフォームにしか適用できませんね。formにid="form_id"を指定してあるとすると、document.forms['form_id']で参照できると思います。
あとinput要素のname属性は廃止されていないはずですから、以下のように書けます。
var form = document.forms['form_id'];
var name=form.name;
var tel=form.tel;
var mail=form.mail;
(o)さん、ありがとうございます!
なるほど。いや、まじで勉強になりました。
javascriptは、ネイティブと中学生英語で比べたら、中3なみって言う位の知識しか持ち合わせていないもんで^^;)