- ベストアンサー
JavaScriptフォーム作成時の空白チェック方法とプログラム例
- JavaScriptで複数のフォームの空白をチェックする方法について説明します。
- 具体的なプログラムの例として、onsubmitイベントでチェックを行う方法を紹介します。
- 確認された空白がある場合はアラートメッセージを表示し、フォームの送信を中止します。
- mauluru
- お礼率17% (21/122)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
onsubmit はフォームのイベントなので、ボタンに付けても意味がありません。 今回の例ならば、送信ボタンの onclick にてチェックと送信を纏めて行うのが簡単かと。 <script> var _ = 0; // 読みやすくするオマジナイ function send() { _ ; function chk1(frm, names){ _ , _ ; var r = true; _ , _ ; for (var i = 0; i < names.length; i++) r &= (frm.elements[names[i]].value != ''); _ , _ ; return r; _ ; } _ ; var r = true; _ ; r &= chk1(document.forms['nform'], ['kaitouran11','kaitouran12','kaitouran13','kaitouran14']); _ ; r &= chk1(document.forms['nform2'], ['kaitouran21','kaitouran22','kaitouran23','kaitouran24']); _ ; r &= chk1(document.forms['nform3'], ['kaitouran31','kaitouran32','kaitouran33','kaitouran34']); _ ; if (r) { _ , _ ; document.forms['nform'].submit(); _ , _ ; document.forms['nform2'].submit(); _ , _ ; document.forms['nform3'].submit(); _ ; } else { _ , _ ; alert('解答欄に空白があります'); _ ; } } </script> (中略) <input type="button" value="送信" onclick="send()">
お礼
すいません。解決しました。どうやらほかの部分でミスを起こしていたようでした。大変ご迷惑をおかけしました。
補足
回答ありがとうございます。 教えていただいたソースを自分で作ったソースに導入してみたところ、 >var = 0; // 読みやすくするオマジナイ の部分が悪さをしており(なんどか置く場所などを変更しました)上手くプログラムが動作してくれません どのようにすればうまく起動しますでしょうか？ 以下ソースです。 <script type="text/javascript"> function varTest(){ debugClear(); debug(" 問題1"); var test1 = "問題文"; debug(test1); var space1 = ""; debug(space1); var testTitle = " 問題2"; debug(testTitle); var test2 = "問題文"; debug(test2); var space2 = ""; debug(space2); var testTitle2 = " 問題3"; debug(testTitle2); var test3 = "問題文"; debug(test3); } function mes() { window.open('example.html', 'mywindow2', 'width=400, height=300, menubar=no, toolbar=no, scrollbars=yes'); } function debug(str){ document.getElementById("debug").innerHTML += "</br>" + str; } function debugClear(){ document.getElementById("debug").innerHTML += ""; } var = 0; function send(){ function chk1(frm, names){ var r = true; for(var i = 0; i < name.lenght; i++) r &= (frm.elements[names[i].value != '']); return r; } var r = true; r &= chk1(document.forms['nform1'],['kaitouran11','kaitouran12','kaitouran13','kaitouran14']); r &= chk1(document.forms['nform2'],['kaitouran21','kaitouran22','kaitouran23','kaitouran24']); r &= chk1(document.forms['nform3'],['kaitouran31','kaitouran32','kaitouran33','kaitouran34']); if(r){ document.form['nform1'].submit(); document.form['nform2'].submit(); document.form['nform3'].submit(); } else{ alert('解答欄に空白があります'); } } </script> </head> <body> <h1>テスト1回目</h1> <form> <input type="button" value="テスト開始" onclick="varTest(); setTimeout('mes()',5*1000);"/> </form> <div id="debug"></div> <form name="nform1" method="POST" action="./include/test.php" enctype="text/plain"> <p>問1</p> <p> (1)<input type="text" name="kaitouran11" size="20"> (2)<input type="text" name="kaitouran12" size="20"> (3)<input type="text" name="kaitouran13" size="20"> (4)<input type="text" name="kaitouran14" size="20"> </p> </form> <form name="nform2" method="POST" action="./include/test.php" enctype="text/plain"> <p>問2</p> <p> (1)<input type="text" name="kaitouran21" size="20"> (2)<input type="text" name="kaitouran22" size="20"> (3)<input type="text" name="kaitouran23" size="20"> (4)<input type="text" name="kaitouran24" size="20"> </p> </form> <form name="nform3" method="POST" action="./include/test.php" enctype="text/plain"> <p>問3</p> <p> (1)<input type="text" name="kaitouran31" size="20"> (2)<input type="text" name="kaitouran32" size="20"> (3)<input type="text" name="kaitouran33" size="20"> (4)<input type="text" name="kaitouran34" size="20"> </p> </form> <input type="button" value="送信" onClick="send()"> </body>