inputで未入力の場合にアラートを出し、記入したら画像を出したい

Googleフォームをカスタマイズしております。
フォームタグのbuttonを押せば#thxMessageが表示されるようにしているのですが、
名前を記入しなくてもクリックしたら表示になってしまいます。
input部分に名前（文字）が入力されてクリックしたら#thxMessageを表示し、入力されずにクリックした場合はrequiredの入力必須としたいです。
こちらはJavaScriptとかを使用して情報分岐のような記述を施さないとだめなのでしょうか？

html
1<iframe name="successIframe" style="display:none;"></iframe>
2<div id="thxMessage" style="display:none;" class="lineWrapper">
3  <div class="sign-success">
4    <i class="fa fa-check fa-3x"></i>
5  </div>
6  <h3 style="margin-top: 0;">ご変更ありがとうございます。</h3>
7  <p>※お手元に届いている注文確認メールは、通常のコースのままとなっておりますが、正常に完了しておりますので、ご安心下さい。</p>
8  <h3>！LINE友だち募集！</h3>
9  <p>公式LINEアカウントを友だちに追加するとマイページ管理や問い合わせも簡単に♪</p>
10  <a href="https://〇〇/index.html" class="lineBlock"><img src="https://scdn.line-apps.com/n/line_add_friends/btn/ja.png" alt="友だち追加" border="0"></a>
11</div>
12
13<div id="formWrapper">
14<div class="panel panel-success">
15  <div class="panel-body">
16      <form action="https://docs.google.com/forms/" method="post" name="myForm" target="successIframe">
17        <div class="form-group">
18          <label for="name">お名前<span>(※入力必須)</span></label>
19          <input type="text" class="form-control" id="name" name="entry.630289397" placeholder="山田 太郎" required/>
20          <button type="submit" name="button" value="送信" onclick="submitForm()">申し込む</button>
21        </div>
22      </form>
23    </div>
24  </div>
25</div>
26
27<script>
28  function submitForm(){
29    document.myForm.submit();
30    document.getElementById('formWrapper').style.display = 'none';
31    document.getElementById('thxMessage').style.display = 'block';
32  }
33</script>
34
35
36<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
37<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

退会済みユーザー

2020/02/20 03:29

この質問内容だと、「はいそうです」という回答になりますがよろしいですか？

m.ts10806

2020/02/20 03:31

思うところあるなら聞く前に試すところからです。

tantalus

2020/02/20 03:41

ご回答ありがとうございます。試してみたらできました。質問力がなくすいません！

kyoya0819

2020/02/20 03:50

自己解決にしてください。

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

回答1件

自己解決

下記を入れてみたらうまくいきました！

JavaScript
1<script type="text/javascript">
2		function check() {
3
4			var flag = 0;
5            document.getElementById('formWrapper').style.display = 'none';
6            document.getElementById('thxMessage').style.display = 'block';
7
8			if (flag) {
9				formWrapper.style.display = "none";
10				return false;
11			} else {
12
13				thxMessage.style.display = "block";
14				return true;
15
16			}
17
18		}
19	</script>