[jQuery]submitボタンの.css is not a function が解決できない

Question

実現したいこと

フォームの必須項目が記入されたときにsubmitボタンを表示する仕様にしたいです。

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

Uncaught TypeError: $(...).css is not a function

該当のソースコード

<form action="/inquiries/create" method="post" id="form">
  <div class="basic-wrapper">
    <h3>性別</h3>
    <ul>
      <li><input type="radio" name="sex" value="男" required><br>男</li>
      <li><input type="radio" name="sex" value="女" required><br>女</li>
    </ul>
  <input type="submit" value="提出する" style="display: none" id="submit">
</form>

<script>
    if ($('#form').checkValidity()){
        $('#submit').css('display', 'block');
    }
</script>

試したこと

$('#form').checkValidity()のほうは正常にtrueやfalseを返します。

補足情報

・MacOS HighSierra
・Ruby 2.5.0
・Rails 5.2.2
・アプリ自体はRails製なので、正確にはhtml.erbです
・HTML5でrequiredを利用しています

回答のほどよろしくお願いします。

Answer 1

３．２．１をChromeで確認したのですが、checkValidity()がないといわれたので、$('#form')[0].checkValidity()に変更してます。

.css については特にエラーはでませんでした。。。
また、この記述だと初回読み込み時のみしか実行されないので、ラジオボタンをクリックした時に実行されるようにしました。省略されていただけでしたらすみません。。。

  $("input[type=radio]").click(function(){
   if ($('#form')[0].checkValidity() ){
        $('#submit').css('display', 'block');
    }
  });

Answer 2

$('#form').checkValidity()

がtrueやfalseを返すのは正常ではありません。
おそらく開発者ツールのコンソールで確認しているのではないでしょうか？
https://developer.mozilla.org/ja/docs/Learn/Common_questions/What_are_browser_developer_tools

そしてこれはまた jQuery が正しく読み込まれていないことを示します。
設定を確認してみてください。

Answer 3

あやふやな記憶&気のせいだったら申し訳ないのですが、jQueryを使う際（？）idとかclassにsubmitだと怒られる気がします。

試しにsubmit以外のid名にしたら動きますかね…？

気のせいでした、すいません。

コレと勘違いしてました
https://chaika.hatenablog.com/entry/2014/03/18/192448

ちなみに、jQueryのバージョンはいくつでしょうか？

Comments

[Yuki0222]

ご回答ありがとうございます！
ご指摘の通り、試しにid名をhogeに変更したのですが、解消できませんでした・・・。

$('#hoge').css('display', 'block')
> Uncaught TypeError: $(...).css is not a function

[Bokunet]

あ、回答編集でやってしまったので念の為…

気のせいでした、すいません。

コレと勘違いしてました
https://chaika.hatenablog.com/entry/2014/03/18/192448

ちなみに、jQueryのバージョンはいくつでしょうか？

当方、jquery 3.3.1で試したら`checkValidity()`関数が無いと怒られてしまって…汗

[Yuki0222]

ありがとうございます。
確認したところ、jQueryは3.2.1でした！
バージョンの違いに原因があるかもしれないので、調べてみます。