GoogleFormを実装した自前のフォームで、Googleの完了画面に遷移させないためJSを使ったらrequiredが効かなくなってしまいました

前提・実現したいこと

初学者で、初めて質問させていただきます。

Googleフォームと連動させたHTMLの自前のフォームをGoogle Apps Script上につくり、入力内容をChatworkに送信させたり、Web画面の下部にTableとして挿入させたりと、分不相応な複雑なWEBアプリを作成すべく取り組んでいます。

最後まで難航したのが、Googleフォームの送信完了画面に遷移させずに、別の形で完了メッセージを出した上で、リセットしたフォームの入力画面に戻すことです。

調べたところ、遷移させないためには、ダミーのiframeを使うのが一般的であることは分かりました。その上で、URLのパラメータを使用してGAS上の別のHTMLページ（完了メッセージ）に遷移する方法などを試しましたが、うまくいかず、たどり着いたのが下記のサイトです。

http://makimakimakino.hatenablog.com/entry/2019/04/20/234842

フォーム送信と送信後の処理をJavaScriptを使ってコントロールしています。別のHTMLページに遷移させることなく、「入力フォーム部分」だけを「完了メッセージ」に置き換える形なので、ページ下部に入力内容のTableを挿入させている当方のサイトにはぴったりです。

試してみたら、フォーム入力後、①GAS経由でChatworkに送信②スプレッドシートからGAS経由でWeb下部のテーブルに挿入③「入力ありがとうございました」のメッセージ表示④更新ボタンを押すことでリセットした入力画面に戻る、と全てを実現でき、「やった！」と感激した、のも束の間、突き当たったのが表題で書いた問題です。

それまで効いていたrequiredによるバリデーションが効かなくなり、空欄のままでも送信ボタンを押せるようになってしまったのです。

いろいろ調べてif文を使う方法など試してみましたが、どうもうまくいきません。jqueryを使う方法がいろいろ見つかりましたが、私の学習進度はJavaScriptまでで理解できません。

下に簡略化したHTMLを書いて起きます。

何か良いお知恵はないでしょうか？　浅学菲才まる出しの質問で、分かりにくければ深くお詫び申し上げます。何卒ご指導ご教唆のほど宜しくお願い致します。

該当のソースコード

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
　　 <base target="_top">
    <title>TestForm</title>
  </head>
  <body>
    <h4>フォーム</h4>
      <div id="formWrapper">
          <form action="https://docs.google.com/forms/d/e/1FAIpQLSfhoYX9uUFcMyF-UEK7lCQmqO1q-pSTArUP4S99zloZ9RNA6Q/formResponse" method="post" name="myForm" target="dummyIframe">
              <div>
                  <label>お名前</label>
                  <input type="text" name="entry.1014751487" required/>
              </div>
              <div>
                <label>電話番号</label>
                <input type="tel" name="entry.630706879" required/>
               </div>
            <input class="btn btn-success" type="button" value="送信" onclick="submitForm()"/>
          </form>
          <iframe name="dummyIframe" style="display:none;"></iframe>
      </div>
      <div id="thxMessage" style="display:none;">
        <p>入力ありがとうございました</p>
      </div>
      <script>
        function submitForm() {
          document.myForm.submit();
          document.getElementById('formWrapper').style.display = 'none';
          document.getElementById('thxMessage').style.display = 'block';
        }
      </script>
  </body>
</html>

行動規範の内容に同意します

回答1件

自己解決

あれこれ調べて試しているうち、 function submitForm()　の中に以下を加え、
document.myForm.submit(); につなげる形にしたら、
欄の空白をアラートできるようになりました。
もう少し調べた後に質問すべきでした。自己完結ですみません。
また宜しくお願い致します。

var val=document.getElementsByName("entry.1014751487")[0];
if (val.value.length == 0) {
  alert("お名前は必須項目です");
  val.focus();
  return;
  }
var val=document.getElementsByName("entry.630706879")[0];
if (val.value.length == 0) {
  alert("電話番号は必須項目です");
  val.focus();
  return;
  }

投稿2019/09/23 07:30

tatsu3

総合スコア11