js html でのログイン機能が動作しません

Question

実現したいこと

ログイン機能が動くようにしたいです
入力欄に名前,passが入力され、loginボタンを押すとflaskアプリケーションにjsでpostリクエストを送りpassと名前が正しいかの判断をする、という機能です。pass,名前が正しい場合はリダイレクト、正しくない場合はログインボタンの下にエラー文を表示させたいです。
flaskアプリケーションへの名前とpassの受け渡しがうまくいきません

前提

flaskアプリケーションへの名前とpassの受け渡しがうまくいきません

該当のソースコード

            <div class="sign-up-htm">
              <div class="group">
                <label for="user2" class="label">ユーザー名</label>
                <input id="user2" type="text" class="input" name="loginname"> <!-- name属性を追加 -->
            </div>
              <div class="group">
                <label for="pass" class="label">パスワード</label>
                <input id="pass" type="password" class="input" data-type="password" name="password"> <!-- name属性を追加 -->
              </div>
              <div class="group">
                <form id="signup-form" action="/log-in" method="POST">
                <input type="submit" class="button" value="Sign Up">
              </form>
              <div id="error-message" class="error-message" style="color: red;"></div> <!-- エラーメッセージの表示位置を変更 -->
              </div>
              <div class="hr"></div>
              <div class="foot-lnk">
                <label for="tab-1">登録がまだの方はこちら</a>
              </div>

document.addEventListener("DOMContentLoaded", function () {
    const form = document.getElementById("signup-form");
    const errorMessage = document.getElementById("error-message");

    form.addEventListener("submit", function (event) {
        event.preventDefault(); // Prevent the default form submission

        // Get form data
        const formData = new FormData(form);

        // Convert form data to an object
        const formObject = {};
        formData.forEach((value, key) => {
            formObject[key] = value;
        });

        // Send data to the server as JSON
        fetch("/logincheck", {
            method: "POST",
            body: JSON.stringify(formObject),
            headers: {
                'Content-Type': 'application/json',
            },
        })
        .then((response) => response.json())
        .then((data) => {
            if (data.error) {
                errorMessage.textContent = "エラー: ユーザー名またはパスワードが違います";
            } else {
                errorMessage.textContent = "";
                // Handle success or continue with further processing
            }
        })
        .catch((error) => {
            console.error("エラー:", error);
        });
    });
});

@app.route('/logincheck', methods=['POST'])
def login_check():
    data = request.get_json()
    print (data)


    
    # ここで username をデータベースなどと照合し、重複があるかどうかを確認するロジックを実装
    
    #if 正しくない場合　
    return jsonify({"error": True, "message": "."})
    #正しい場合
    return jsonify({"error": False, "message": "."})

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

vscode
flask
python3

Answer 1

単純に、タグの囲みミスです。
具体的には、ユーザー名やパスワードのフィールドがformタグに囲まれていないため、フォーム送信時にそれらのデータがフォームデータとして送信されていません。

   <div class="sign-up-htm">
    <form id="signup-form">   
      <div class="group">
        <label for="user2" class="label">ユーザー名</label>
        <input id="user2" type="text" class="input" name="loginname"> <!-- name属性を追加 -->
      </div>
      <div class="group">
        <label for="pass" class="label">パスワード</label>
        <input id="pass" type="password" class="input" data-type="password" name="password"> <!-- name属性を追加 -->
      </div>
      <div class="group">
        <input type="submit" class="button" value="Sign Up">
    </form>
    <div id="error-message" class="error-message" style="color: red;"></div> <!-- エラーメッセージの表示位置を変更 -->
  </div>
  <div class="hr"></div>
  <div class="foot-lnk">
    <label for="tab-1">登録がまだの方はこちら</a>
  </div>

Answer 2

formではなくclickにすることで解決。