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 运行这些代码时，"必需"将正常运行。但是一旦我包含一个寄存器.js文件，我为获取数据并使用 AJAX 将数据发送到寄存器.php，所需的属性似乎不起作用。在寄存器.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会覆盖require功能的原因？如何超越它，或者如果它必须覆盖，我应该如何在我的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);
        }
    });
  });
});