【JavaScript】submit();でエラー(Cannot read property 'submit' of undefined at HTMLButtonElement.)が出てしまう。

Question

前提・実現したいこと

Ruby, Ruby on Railsを中心にプログラミング学習を行なっている初学者です。
バックエンドにRuby on Railsを使ったアプリケーションを製作中です。
フロントエンドの処理としてJavaScriptをネット検索しながら記述しています。

フォームに入力された値をsubmitする際、クライアント側でバリデーションする処理を実装しました。
しかし、submit()メソッドでエラーが出ます。どこを直せば良いでしょうか。

環境

• Google Chrome
• Ruby 3.0.1
• Rails 6.1.4
• Bootstrap 5.0.0-beta

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

画像を添付します。（本当はgifを貼りたかったのですが、２MB以下のサイズでも何故か載せられませんでした。）

文字数のバリデーションを行うテキストボックスがあります。（testと入力しています）

投稿ボタンを押すとJSの関数が流れるようにしています。

エラーメッセージ

Uncaught TypeError: Cannot read property 'submit' of undefined
    at HTMLButtonElement.<anonymous>

submitに対するオブジェクト変数'form'を定義しており、undefinedということはないと思うのですが…。

ソースコード

<%# app/views/tasks/_form.html.erb %>
<%# 投稿・編集フォーム %>

<%= form_with model: task, local: true do |f| %>
  <div id="errorField"></div>

  <%# user_id %>
  <%= f.hidden_field :user_id, value: current_user.id %>

  <%# ステータス %>
  <div class="form-group row">
    <%= f.label :state, "State : ", class: "col-xl-5" %>

    <% unless value == '更新' %>
    <%# NEWの場合 %>
      <div class="col-xl-7">
        <%= button_tag 'TODO', type: 'button', class: "btn btn-primary form-control", id: "state_btn" %>
        <%= f.hidden_field :state, value: "TODO" %>
      </div>
    <% else %>
    <%# EDITの場合 %>
      <div class="col-xl-7">
        <%= button_tag state, type: 'button', class: "btn btn-primary form-control", id: "state_btn" %>
        <%= f.hidden_field :state, value: state %>
      </div>
    <% end %>
  </div>

  <%# デッドライン %>
  <div class="form-group row">
    <%= f.label :limit, "Limit : ", class: "col-sm-4" %>
    <%= f.date_field :limit, class: "col-sm-8 form-control", value: Date.current.strftime() %>
  </div>

  <%# コンテンツ %>
  <div class="form-group row">
    <%= f.label :content, "Task :" %>
  <%# ここに入力された文字数をクライアント側でバリデーションする %>
    <%= f.text_field :content, autocomplete: 'off' %>
  </div>

  <%# 閉じる・投稿ボタン %>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
　　<%# 以下のボタンをクリックするとクライアント側で文字数のチェックを行う %>
    <%= button_tag value, type: 'button', class: "btn btn-primary", id: "submitButton" %>
  </div>
<% end %>

// app/views/tasks/new.js.erb

// モーダル内のフォームを取得
var form = document.getElementsByTagName('form')[0];
// フォームのレンダリング
form.outerHTML = '<%= j(render 'form', task: Task.new, value: '投稿') %>';

// Railsのform_withではname属性を付けられないので、ここで追加している
form.setAttribute("name", "myForm")

// クライアント側でのバリデーション処理
var submitButton = document.getElementById('submitButton');

submitButton.addEventListener('click', function () {
  var task_content = document.getElementById('task_content');
  var errorField = document.getElementById('errorField');

  // contentのチェック
  if (task_content.value.length == 0 || task_content.value.length >= 51) {
    // こちらの処理は通る
    console.log('[CONTENT INVALID]');
    errorField.innerHTML = 'タスクは1文字以上、50文字以内で入力してください';
    task_content.style.border = 'solid 2px red';
  } else {
    // console.log('[POST CREATE TASK]');
    document.form.submit();
    // formのname属性に対してもsubmitメソッド（これもダメ）
    // document.myForm.submit();
  }
})

参考にした記事など

以下のリンクを参考にコードを書きました。

• Form submit() Method - w3schools(海外サイト)
• JavaScriptのsubmitイベントで、フォーム送信をコントロールしよう - 侍エンジニアブログ
• jsでformを送る(submitする)際に気をつけること。 - かもメモ。（はてなブログ）

Answer 1

    document.form.submit();

document.form が undefined ですね。document に form というプロパティはないということです。

form.submit(); (コード中の変数 form を参照)とか this.form.submit() (押されたボタンが属する<form>を参照)なのではないでしょうか。

Comments

[Hamadust]

ご回答ありがとうございます。
this.form.submit();　でsubmitが通りました！

実はform.submit();は最初に試しており、
'Form submission canceled because the form is not connected'
(フォームが接続されていないため、フォームの送信がキャンセルされました)

というエラーが返ってきていたため、正しい記述方法が不明でこのたびこちらで質問させていただいた次第です。

オブジェクトのプロパティの考え方など非常に参考となるご回答でした。
新たな知見を得ることができました。

Answer 2

rubyでjs文を書くのはトラブルのもとでは？
jsは単体で形成しデータをrubyからjsonで受け取って処理してみて下さい

Comments

[Hamadust]

ご回答ありがとうございます。

今回のトラブルはjsの記述を直すことで解決しましたが、作成中のアプリはAjaxを用いており、Rubyでほぼ全てのjs文を記述しています。
ご指摘の通り、所々で予期せぬエラーが発生するのでトラブルの元になると思いました。

jsファイルを単体で形成して、rubyからjsonでを受け取って処理する考え方は目から鱗でした。
新たな知見として参考にさせていただき、方法を調べつつ実践してjs文を修正したいと思います。