Googleフォームを自分で作成したフォームに埋め込んで、 お問い合わせフォームとスプレッドシートを連携させましたが 各フォーム内に設置した「required」が効かなくなりました。

Question

前提・実現したいこと

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

タイトルにもあるように、
Googleフォームを自分で作成したフォームに埋め込んで、
お問い合わせフォームとスプレッドシートを連携させましたが
各フォーム内に設置した「required」が効かなくなりました。

https://borderlessryohei.com/form-customize/
を参考に、Googleフォームと自分で作成したフォームを連携させて、
サンクスも自前のものに飛ぶように設定をしました。
空欄がなく、全て入力をされていれば、
問題なくサンクスページに飛び、スプレッドシートも更新されます。

が、「required」を設定している入力項目が空欄でも
サンクスに飛ぶようになってしまいます。

この際、空欄項目があった場合、
「必須項目です」とエラーが出るようにジャバスクリプトで
設定を致しましたが、
エラーも何も出ずに、サンクスページに飛んでしまいます。
この状態だとスプレッドシートが更新されません。

どうにかして「required」を効かせたいのですが
コードはどこが間違っていますでしょうか？
ご回答の程よろしくお願いいたします。

※フォーム自体は長いので、
問題が起きている一部を抜粋して質問をさせていただきます。

発生している問題・エラーメッセージ

<!--Googleフォームからサンクスへの移行のタグ-->
<script type="text/javascript">var submitted=false;</script>
<iframe name="hidden_iframe" id="hidden_iframe" style="display: none;" onload="if(submitted) {window.location='サンクスページURLが入ります';}"></iframe>

<!--Googleフォームとの連携-->
<form id="form" class="" action="https://docs.google.com/forms/Googleフォームとの連携部分" method="post" novalidate class="Form _TestForm "  target="hidden_iframe"  onsubmit="submitted=true;">

<div class="_TestQuestion">
<div class="_TestResult__item">
<dt>
<label for="form-item-email" class="_TestResult__itemName" >メールアドレスを入力してください</label>
<br>
<font color="#fff000" size="5px">※必須</font>
</dt>

<dd>
<div class="_TestResult__holder">
<input type="email" id="form-item-email" name="entry.XXXXXXXXXX" value="" placeholder="例）[e-mail]"  class="_TestResult__input" required="required"></div>
</dd>

</div>
<p class="_TestResult__submit"><button type="submit">次へ&nbsp;&#x25B6;</button></p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
// Form Validator
$(document).ready(function () {
$("#form").validate({
rules: {
"entry.XXXXXXXXXX": {
required: true,
email: true
}
},
messages: {
"entry.XXXXXXXXXX": {
required: "必須項目です",
email: "必須項目です"
}
},
submitHandler: function (form) { // for demo
form.submit();
}
});
				
});
</script>
</form>

エラーメッセージ

### 該当のソースコード

```ここに言語名を入力
ソースコード

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[gentaro]

https://qiita.com/doikoji/items/7cf9e659095816ab1131

[K_3578]

ソースコードはMarkDownのcode機能で提示してください。
コード全体を選択して<code>ボタンを押し、言語名を置き換えるだけです

Answer 1

すみません、
自分の方で調べていましたら
こちらのように

function sendGform(){
 var val=document.getElementsByName("entry.XXXXXXXXXX")[0];
if (val.value.length == 0) {
alert("選択してください");
val.focus();
return;
}

を</body>の前に置いたところ、
無事に未入力チェックが反応をしてくれました。

分かりにくい質問をしてしまい
申し訳ありません…。