- ベストアンサー
フォームで複数の関数を１つにまとめる方法
- フォームに関して、必須項目が未入力・未選択の場合に警告するJavaScriptを記述したいのですが、複数のJavaScriptを１つにまとめるにはどうしたら良いのでしょうか。
- テキストフィールド未入力の場合に警告する、メールアドレスが間違いor未入力の場合に警告する、セレクトボックスが未選択の場合に警告するという３つを同じページで同時に設定する方法が分かりません。
- JavaScriptの記述経験が殆ど無いため、出来る限り詳しくご教示願いたく、よろしくお願い致します！
- popcube
- お礼率94% (18/19)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
質問文には色々と細かい間違いも多かったので。 とりあえず以下の例文で動作するはずです？FireFox等は動作非保証です(笑)。 ━【本文ここから】━━━━━━━━━━━━━━━━━━━━━ <html> <head> <meta http-equiv="Content-Language" content="jp" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/JavaScript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <script type="text/JavaScript"> <!-- function valueCheck(){ var erorrFlag = 0; var emailErorr = 0; var selectErorr = 0; var dat_Name = document.form1.userName.value; //名前 var dat_Mail = document.form1.userEmail.value; //メルアド var dat_HomeAdrs = document.form1.userHomeAdrs.value; //住所 var dat_HomeTown = document.form1.userHomeTown.options[document.form1.userHomeTown.selectedIndex].value; //地域 var dat_BirthMon = document.form1.userBirthMM.options[document.form1.userBirthMM.selectedIndex].value; //生年月日1 var dat_BirthDay = document.form1.userBirthDD.options[document.form1.userBirthDD.selectedIndex].value; //生年月日2 if(dat_Name == "") { erorrFlag = 1; } else if(!dat_Mail.match(/.+@.+\..+/)) { emailErorr = 1; } else if(dat_HomeAdrs == "") { erorrFlag = 2; } else if(dat_HomeTown == "") { selectErorr = 1; } else if(dat_BirthMon == "") { selectErorr = 2; } else if(dat_BirthDay == "") { selectErorr = 3; } else{ erorrFlag = 0; emailErorr = 0; selectErorr = 0; } if(erorrFlag){ window.alert('必須項目に未入力があります！'); return false; } else if(emailErorr){ window.alert('メールアドレスが正しくありません！'); return false; } else if(erorrFlag){ window.alert('必須項目が選択されていません！'); return false;} else{ window.alert('全ての項目が正しく入力されました。'); return true; } } // --> </script> </head> <body text="#000000" bgcolor="#ffffff"> <p>Javaテスト</p> <form name="form1" onSubmit="return valueCheck()"> <p>■お名前：<input type="text" name="userName" size="30" style="ime-mode:active;"></input></p> <p>■メールアドレス：<input type="text" name="userEmail" size="30" style="ime-mode:inactive;"></input></p> <p>■地域： <select name="userHomeTown"> <option value="北海道">北海道</option> <option value="青森県">青森県</option> </select> </p> <p>■ご住所：<input type="text" name="userHomeAdrs" size="60" style="ime-mode:active;"></input></p> <p>■生年月日： <select name="userBirthMM"> <option>1</option> <option>2</option> </select>月 <select name="userBirthDD"> <option>1</option> <option>2</option> </select>日 </p> <p><input type="submit" value=" OK "></input></p> </form> </body> </html> ━【本文ここまで】━━━━━━━━━━━━━━━━━━━━━ ポイントとしてわForm文の内容を、一旦、変数に代入して後から使い回しやすく加工して置く事。 エラー用のフラグ等も単純に“0”と“1”でわなく、エラーの種類に応じて“1～3”の数値を代入して置く事で、後からエラー内容の検証にも使える。 ～等々と言ったところでしょうか？
お礼
Firefoxにも対応させたかった為、 試行錯誤の末、先程なんとかなりました。 具体的には、 それぞれの function check(){ の部分に function check1(){ function check2(){ function check3(){ と番号を付け、 本文のフォーム部分を <form name="form1" onSubmit="check1();check2();check3()"> としました。 これで何か不具合が発生した場合は、 ご教示通りのスクリプトを再度記述してみます。 お忙しい中、わざわざご親切なご回答を頂き、 本当に有難うございました！