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 运行这些代码时，“required”将正常运行。但是，一旦我包含了一个用于获取数据的 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);
        }
    });
  });

});