Question

我正在寻找：使用required =“true”进行固有html 5表单验证的方法，如果用户点击“提交”按钮，首先发生的是自动html 5验证，其中检查用户是否提供“用户名”。如果不是，那么它会显示丑陋的错误泡沫。

如果提供了，那么，如果用户名存在，我就可以使用自己的自定义验证来检查数据库。如果是，则返回true（允许提交），否则返回false。发生了什么：表单已提交。这就像它不等待成功回调返回true / false是否应该提交。

我希望这很清楚！代码如下：

HTML：

<form>
<input type="text" required="true" id="username" />
<button type="submit">Submit</button>
</form>

JS：

$("form").submit(function() {
  $.ajax({
      url: 'usernamechecker.php?username=' + $("#username").val(),
      success: function(resp) {
        if (!resp.UsernameExists) {
          return true; // allow form submission
        }
        return false; // do not allow form submission
      }
    });
});

Answer 1

您不能通过返回值这样的回调。在“提交”处理程序已经返回之后，“ajax”调用完成后，长将不会运行“成功”回调。

而不是那样，我只是做提交，如果存在服务器端问题（如“使用中的用户名”或其他），则让它返回错误。两次往返是没有意义的。如果没有问题，它可以完成操作并返回您想要的任何结果页面。

Answer 2

您需要在ajax调用中添加“async：false”作为参数，以便在继续执行其余代码之前强制完成调用。

$("form").submit(function(event) {
  $.ajax({
      async: false,
      url: 'usernamechecker.php?username=' + $("#username").val(),
      timeout: 1000,
      success: function(resp) {
        if (resp.UsernameExists) {
          event.preventDefault(); // do not allow form submission
        },
      error: function() {
          //fall back code when there's an error or timeout
      },
    });
});

html5使用required =“true”验证表单并进行自定义检查

2 个答案: