javascript - jQuery 或 AJAX 会使 HTML "required"属性无效吗？

Question

我现在正在构建一个注册页面，并根据需要标记了用户名和密码输入。简单代码为:

Username <input id="username" type="text" required/>
Password <input id="username" type="password" required/>
<button id="register">Register</button>
<div id="registerOutput></div>

当我在本地主机上使用纯 HTML 运行这些代码时，“必需”将正常运行。但是一旦我包含了一个我为获取数据而制作的 register.js 文件并使用 AJAX 将数据发送到 register.php，所需的属性似乎不起作用。在 register.js 中，简单的代码为:

$(document).ready(function(){
    $("#register").on("click", function(){

        var username        = $("#username").val();
        var password        = $("#password").val();

        var userData = "username=" + username + "&password=" + password;

        $.ajax({
            method: "post",
            url: "register.php?",
            data: userData,
            success: function(backData){
                $("#registerOutput").html(backData);
            }
        });
    });
});

谁能告诉我为什么 jQuery 会覆盖 required 的功能？如何超越它或者如果它必须覆盖，我应该如何在我的 jQuery 代码中做同样的事情？

Answer 1

您可能想要稍微重新设计一下您的代码。有一种方法既可以使用 HTML 的便利性，又可以使用 AJAX 的全部功能。

我在 jsfiddle 中编辑了您的示例:https://jsfiddle.net/myezf63b/

这里是修改后的 HTML:

<form id="form">
  Username <input id="username" type="text" required/>
  Password <input id="username" type="password" required/>
  <button type="submit" id="register">Register</button>
</form>

<div id="registerOutput">
</div>

基本上我将 type="submit" 添加到按钮并将其包装在表单中。

这是修改后的 jQuery 代码:

我添加了 e.preventDefault() 以防止网站重定向(重新加载页面)，并且作为事件我使用了遵循此模式的 submit。

$(document).ready(function(){ $("#form").on("submit", function(e){
    e.preventDefault()
    var username        = $("#username").val();
    var password        = $("#password").val();

    var userData = "username=" + username + "&password=" + password;
        console.log('test')
    $.ajax({
        method: "post",
        url: "register.php?",
        data: userData,
        success: function(backData){
            $("#registerOutput").html(backData);
        }
    });
  });

});