不能将 preventDefault() 与 if, else 一起使用

Question

$.get 在下面的代码中 returns 一个名为 data 的 JSON 格式的布尔值。但是data的值是false还是truepreventDefault()无论如何都会阻止提交表单。

$(document).ready(function() {
  $("#username").blur(function() {
    let username = document.getElementById("username").value;
    
    $.get("/check", {
      username_value: username
    }, function(data) {
      alert(data);
      
      $("#submit").click(function(e) {
        if (data) {
          e.preventDefault();
        } else if (!data) {
          e.submit();
        }
      });
    });
  });
});

这是 /check 部分

@app.route("/check", methods=["GET"])
def check():
    """Return true if username available, else false, in JSON format"""
    get_username = request.args.get("username_value")

    users = db.execute("SELECT username FROM users")

    lenght = len(get_username)
    i = 0
    for user in users:
        if get_username == users[i]["username"] or not lenght > 1:
            return jsonify(True)
        i += 1

    return jsonify(False)

顺便说一句，我对编码业务很陌生。感谢您的帮助。

Answer 1

尝试更改为以这种方式从表单 ID 而不是按钮捕获事件：

$("#form").submit(function (e) {
  if (!data) {
    e.preventDefault();    
  } else {
    e.submit();
  }
});

e.submit() 必须在提交表单的事件中使用。

确保数据是布尔类型。并且不要忘记将选择器更改为您的表单 ID。

Answer 2

我通过将 $.get 替换为 $.ajax 来解决问题。我想问题出在 $.get 只能异步工作这一事实。所以我在 false 处使用了 $.ajax 的异步参数。然后它就像我想要的那样工作。

代码的最新版本：

$(document).ready(function() {
          $('#form').submit(function(e){
              let username = document.getElementById("username").value;
              let password = document.getElementById("password").value;
              let confirmation = document.getElementById("confirmation").value;
              var boolean_data;
              $.ajax({url: "/check?username=" + username, type: 'get', async: false, success: function(data){boolean_data=data;}});

              if(!boolean_data) {
                alert("\"" + username + "\"" + " username is already taken.");
                e.preventDefault();
              }
              else if(!password || !confirmation) {
                  alert("Pls povide a password and confrim it");
                  e.preventDefault();
              }
              else if(password != confirmation) {
                  alert("Passwords don't match");
                  e.preventDefault();
              }

          });
      });

感谢所有评论和回答我问题的人。

不能将 preventDefault() 与 if, else 一起使用

Can't use preventDefault() with if, else

javascript

jquery

preventdefault