jQueryを用いたバリーデーションチェックがうまくいきません

Question

前提・実現したいこと

グーグルフォームと連携させていて、カスタマイズしたものを使用しております。
データ自体はグーグルフォームに行くようにしており、完了画面はオリジナルに遷移させる予定です。
（※今は一時的にURLがわからないため、適当なサイト様のURLを設定させてもらっています）

完了画面の遷移はうまくいきますし、未記入項目があった場合にグーグルフォームに遷移してしまうこともありません。
他者様のサイトなのでこちらではちょっとご紹介できないのですが、成功例を参考にさせていただきながら必要箇所を適宜修正したり、といった具合で実装していたのですが、どうにも上手く動きません。

いろいろな方法で試してはｊｓの方はコメントアウトしてを繰り返していたので、もしかしたら別の方法で試してものが相殺しあっているのかもしれないなどとは思いました。
ただ、

①未記入項目があっても、「class:aleart」を設定しているメッセージが出ない
（もしくは記入済みになったらそのメッセージを非表示にする）
②すべての項目を記入・プライバシーポリシーをチェックしないと送信ボタンは押せない（無効化）
逆に、すべて記入・チェックしているとはじめて送信ができるようになる

かなり悩んでいまして、ぜひご教授頂けますと幸いです。

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

未記入項目があってもなくてもボタンが押せる
未記入であっても該当箇所にエラーメッセージが表示されない

該当のソースコード

      <script>  var sendFlag = true;</script>
     <form data-aos="fade-up" name="myForm" method="post" target="dummyIframe"  onsubmit="submitted=true;" action="ここにはURLを入れています" id="contact">
            <dl id="textSection">
                <dt>お名前</dt>
                <input type="text" class="contact-form" name="entry.2005620554"　id="text">
                <p  class="alert">※お名前が入力されていません</p>
            
            </dl>
            <dl id="textSection">
                <dt>メールアドレス</dt>
                <input type="email" class="contact-form" name="emailAddress" value=""  pattern="^(([-\w\d]+)(.[-\w\d]+)*@([-\w\d]+)(.[-\w\d]+)*(.([a-zA-Z]{2,5}|[\d]{1,3})){1,2})$" id="text">
                <p  class="alert" >※メールアドレスが入力されていません</p>
            
            </dl>
            <dl id="textareaSection">
                <dt>お問い合わせ内容</dt>
                <textarea  class="contact-form" name="entry.839337160" id="textarea"></textarea>
                <p class="alert">※お問い合わせ内容が入力されていません</p>
            
            </dl>
           
            <label class="check" id="privacyCheck">
                <input type="checkbox"　for="privacyCheck"　class="privacyCheck" name="myForm"　id="privacyCheck">プライバシーポリシーに同意する
                <p  class="alert">※プライバシーポリシーを必読の上、同意にチェックをしてください</p>
            
           
            </label>
           
            <button class="btn"  type="submit" value="送信する"　id="js-submit">送信する</button>
          
        </form>

該当のソースコード

html body form {
  padding: 60px;
  background-color: #FFFFFF;
  margin-top: 44px;
  color: #333333;
  font-weight: bold;
  text-align: left;
  /*   .text{
        text-align: center;
        line-height: 2.8;
    
        
    } */
  /*  &::before{
            content:"";
            display: inline-block;//これを指定すると現れる
            width:20px;
            height:20px;
            text-align: center;
            border:1px solid $border-glay;
            margin-right:10px;
        } */
}

@media screen and (max-width: 767px) {
  html body form {
    padding: 15px;
  }
}

html body form input, html body form textarea {
  background-color: #EEFBFB;
  border: none;
}

html body form input {
  max-width: 499px;
  max-height: 62px;
}

@media screen and (max-width: 767px) {
  html body form input {
    max-width: 300px;
  }
}

html body form label {
  margin: 0 auto;
  text-align: center;
  display: block;
  padding-top: 72px;
}

html body form dl {
  margin-bottom: 27px;
}

html body form dl:last-of-type {
  margin-bottom: 0;
}

html body form dl:last-of-type textarea {
  width: 100vw;
  max-width: 1000px;
  min-height: 179px;
  resize: none;
}

@media screen and (max-width: 999px) {
  html body form dl:last-of-type textarea {
    width: 60vw;
    min-height: 230px;
  }
}

@media screen and (max-width: 767px) {
  html body form dl:last-of-type textarea {
    width: 65vw;
    min-height: 230px;
  }
}

html body form dl input {
  width: 49vw;
  height: 43px;
}

html body form dt {
  position: relative;
  margin-bottom: 39px;
}

html body form dt::after {
  position: absolute;
  content: '必須';
  color: #FFFFFF;
  text-align: center;
  display: inline-block;
  width: 60px;
  height: 30px;
  background-color: #0C449B;
  border-radius: 10px;
  font-size: 1.4rem;
  margin-left: 23px;
  font-weight: normal;
}

html body form .check {
  text-align: center;
  margin-bottom: 30px;
}

html body form .check input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: none;
  width: 20px;
  height: 20px;
  cursor: pointer;
  text-align: center;
  background-color: #FFFFFF;
  line-height: 2.8;
  border: 2px solid #00000029;
  vertical-align: -5px;
}

html body form .check input:checked {
  background-image: url(../img/sozai_arrow.svg);
  overflow: hidden;
  background-position: center;
  background-size: cover;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
}

html body form .btn {
  margin: 0 auto;
  border: none;
  background: -webkit-linear-gradient(left, #FA41CC, #6020B0);
  width: 155px;
  height: 37px;
  display: block;
  border-radius: 10px;
  color: #FFFFFF;
  text-align: center;
  font-size: 1.4rem;
  font-weight: normal;
}

html body form .alert {
  color: red;
  text-align: left;
  margin: 0 auto;
}

html body #thxMessage {
  font-size: 2rem;
  color: #FFFFFF;
}

 //jqueryを用いたバリデーション
//全てのアラート分を非表示にする クラスでまとめて 

$(".alert").hide(); 
//送信ボタンをクリック 
  $("#js-submit").click(function () {
    //チェック用の変数sendflag　これがすべてtrueであれば送信の許可を出す 
    var sendFlag = true;
   
    //一行入力フィールドのチェック 
    if (!$("#text").val()) {
      //入力がない：アラート分を表示 
      $("#textSection .alert").show();
      sendFlag = false;//入力がなければfalseに 
    } else {
      //入力がある：アラート分を非表示 
      $("#textSection .alert").hide();
    }

    //複数行textareaのチェック 
    if (!$("#textarea").val()) {
      //入力がない：アラート分を表示 
      $("#textareaSection .alert").show();
      sendFlag = false;//入力がなければfalseに 
    } else {
      //入力がある：アラート分を非表示 
      $("#textareaSection .alert").hide();
    }
     

  //ポリシーのチェック項目
    $('#js-submit').prop('disabled', true);
    
    $('#privacyCheck').on('click', function () {
      if ($(this).prop('checked') == false) {
        $('#js-submit').prop('disabled', true);
      } else {
        $('#js-submit').prop('disabled', false);
      }
    });

試したこと

https://www.webdlab.com/labs/form-input-textarea-2/

書籍：jQuery標準デザイン講座　フォームのバリデーションコード参考

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

OS:Windows
エディタ:VScode
ブラウザ:クローム

ご回答を受けての訂正後

やりたいことが実は質問当時は矛盾していて、
未記入項目があり、ボタンを押したときにしたい挙動は「エラーメッセージを表示　かつ　完了画面には遷移しない」
であり、ボタンそのものを押せなくしたいわけではなかったと自覚しました。
よって、成功したコードをいかに訂正致します。

$(function () {
  //jqueryを用いたバリデーション
//全てのアラート分を非表示にする クラスでまとめて 

$(".alert").hide(); 
//送信ボタンをクリック 
  $("#contact input, #contact textarea").on("change",function () {
    //チェック用の変数sendflag　これがすべてtrueであれば送信の許可を出す 
    var sendFlag = true;
   
    //一行入力フィールドのチェック 
    if (!$("#text").val()) {
      //入力がない：アラート分を表示 
      $("#textSection .alert").show();
      sendFlag = false;//入力がなければfalseに 
    } else {
      //入力がある：アラート分を非表示 
      $("#textSection .alert").hide();
    }

    //複数行textareaのチェック 
    if (!$("#textarea").val()) {
      //入力がない：アラート分を表示 
      $("#textareaSection .alert").show();
      sendFlag = false;//入力がなければfalseに 
    } else {
      //入力がある：アラート分を非表示 
      $("#textareaSection .alert").hide();
    }
     

  });
       //ポリシーのチェック項目
           $('#js-submit').prop('disabled', true);
    $('#privacyCheck').on('click', function () {
      if ($(this).prop('checked') == false) {
        $('#js-submit').prop('disabled', true);
      } else {
        $('#js-submit').prop('disabled', false);
      }
    });
 
    //フォームが送信されないようにするには以下のreturn falseが必要 
    //上記の各項目がすべてfalseになることなく、trueであればreturn false（送信の無効化）を改めて解除して、送信の有効化にする 
    if (sendFlag == false) {
      return false;//falseであれば送信を許可しない(そうでなければ送信) 
    }


});

Answer 1

HTMLの<button class="btn" type="submit" value="送信する"　id="js-submit">送信する</button>の部分に全角スペースがあるため、正しく動作しないようです。
（上記のbutton要素にidが指定されていないため、$("#js-submit").click(function () {以下が呼び出されていません）

Comments

[mitrasi]

ご回答ありがとうございます！
早速試してみたところおっしゃる通りで、プライバシーポリシー以外はこれで直りました。
（なんともしょうもないミスでお恥ずかしい限りです…）
ただ、何回かに1回とかたまに記入済みのエラーメッセージも表示されてしまうようです????
しかし、プライバシーポリシーは正しく動作できませんでした????
やはり書き方が間違っているのでしょうか？

[hallen0225]

プライバシーポリシーのチェックボックスに関して見落としておりました。
Javascriptの「$('#privacyCheck').on('click', function () {」以下の部分が、「$("#js-submit").click(function () {」の中に入ってしまっています。

そのため、「$('#privacyCheck').on('click', function () {」以下は呼び出されることがないのだと思います。

[hallen0225]

ところで、「これがすべてtrueであれば送信の許可を出す」に相当する処理が見当たらないように思うのですが、この部分は大丈夫でしょうか？
あと、privacyCheckというidが2つの要素（labelとinput）についてしまっているので、inputのみにつくようにすした方がよいように思います（idは、1つのページ内で重複してはいけないルールです）

[mitrasi]

ご回答ありがとうございます！
プライバシーポリシーの方、なるほどと思い、「$("#js-submit").click(function () {」外に出してみましたが、チェックを付けないと送信はできませんがエラーメッセージも表示されません。

ご指摘いただきました「これがすべてtrueであれば送信の許可を出す」箇所に関してはぬけておりましたので、そこも含めて現状を更新致しました。ぜひご教授頂けますと幸いです。

[hallen0225]

エラーメッセージというのはどのタイミングで出力したいのですか？？
チェックが付いていないと送信ボタンが押せないわけなので、「送信ボタンを押したタイミング」ではないのだと思いますが。

ここまでたどり着いていて、質問文のコードを自力で書ける方ならば、エラーメッセージをいつ出したいか考えれば回答に行き着けると思います。

[mitrasi]

考え方のヒントまでありがとうございます。
考え直したところ、
「送信ボタンを押すときに未記入があるとボタンを押せなくなる」と
「未記入項目があったらエラーメッセージを発生させる」と
ボタンを押したときにエラーメッセージを発生させる処理を指示しているのに、
未記入があるとそもそもボタンを押せなくなるのでそこで矛盾が発生していたようです。

結果としてやりたいことは、
「プライバシーポリシーも含め未記入項目がある場合に、送信ボタンを押した際に、完了画面に遷移しない（ただしボタンを無効化するわけではない）、代わりにエラーメッセージを表示する。」
ということがしたかったのだと明確にすることができました。

おかげさまで、やり方をご教授頂くだけでなく、お導きを頂き深い学びになりました。
初歩的なことですが、やりたいことを明確にし、指示と矛盾していないか意識していこうと思います。
本当にありがとうございました。