表单验证不同步

Question

我正在完成 CS50 课程的作业，我是 Jquery/Ajax 的新手。在其中一种表格（注册表格）中，我正在检查输入到现有用户的文本字段中的用户名。我有代码向 Flask/Python 后端发出 GET 请求，然后查询数据库和 returns 一个 Json（用户的 true/false 已经存在是或否）。

我默认禁用提交按钮。只有当用户输入唯一的用户名时，才会启用提交按钮。否则，将显示一条错误消息并且提交按钮保持禁用状态。我用 keyup 函数检查 "live"。

代码运行良好，除非我非常快速地输入现有用户名。然后不知何故，提交按钮被启用而不是被禁用。这几乎就像浏览器仍在追赶对后端的 GET 请求，因此注册了不完整的名称，并且无法正确响应作为用户名输入的最新值。

例如，当我输入 "John"（现有用户）时，可以在（Flask）控制台中看到 JSON 没有按照我输入的顺序返回，例如"J"、"Jo"、"Joh"、"John"。但是返回的 Jsons 的顺序是例如"Jo"、"J"、"John"、"Joh"。在这种情况下，这会导致提交按钮被错误地启用，因为字段 "Username" 的当前值是 "John"，这是一个现有用户。

我在下面粘贴了一段我的 JS 代码，你能给我一些指示吗？

    <script>
    (function() {
    $( "#username" ).keyup(function(event) {
        var username = document.getElementById('username').value;
        $.ajax({
                url: "/check",
                data: {username: username},
                dataType: "json",
                }).done(
                        function (data, textStatus, jqXHR)
                            {
                                if (data == true)
                                {
                                    $('#usernameExists').removeClass('collapse');
                                    document.getElementById("register").disabled = true;
                                }
                                else
                                {
                                    $('#usernameExists').addClass('collapse');
                                    document.getElementById("register").disabled = false;

                                }
                            }
                );
    });
    })();
    </script>

Answer 1

为什么要使用onkeyup？让用户完成他们的想法。正如您所发现的，它会为每个字母执行脚本。这将导致不准确的结果，例如，如果现有用户 "JohnDoe"，那么可怜的 "John" 将永远无法注册。

看看onchange in MDN doc.

表单验证不同步

Form validation out of sync

javascript

jquery

flask

cs50