html5 validate form with required =“true”and custom check

我在找什么：使用required =“true”进行先天html5表单验证的方法，如果用户点击“Submit”按钮，首先会发生的是自动的HTML 5验证，它会检查用户是否提供“用户名”。如果不是，那么它显示丑陋的错误泡泡。html5 validate form with required =“true”and custom check

如果提供了，但是，我再有对数据库检查，如果用户名存在，我自己的自定义验证。如果是，则返回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 
     } 
    }); 
});

来源

2011-11-07 Ian Davis

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

$("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 
     }, 
    }); 
});

来源

2011-11-07 21:32:36

这可能是一个非常糟糕的主意，因为这会导致浏览器在等待响应时完全冻结。在很少的情况下，同步ajax是有意义的（在我个人的经验中，没有，但我会给出这个想法的好处）。 – Pointy

我很喜欢这个想法。但是，在成功回调中，我仍然有“回报真实”吗？ –

是的。这回答了他的问题，但他肯定需要设置超时以及可能是加载图形。 –

您无法通过返回一个值那样的回调。在“submit”处理程序已经返回之后，“成功”的回调将不会运行，直到“ajax”调用完成，long。

取而代之的是，我只是不提交，让它返回一个错误，如果有服务器端的问题（如“使用用户名”或其他）。进行两次往返毫无意义。如果没有问题，它可以完成操作并返回所需的任何结果页。

来源

2011-11-07 21:31:36 Pointy

html5 validate form with required =“true”and custom check

回答

相关问题