如果存在ajax错误，jquery会阻止表单提交

我无法找到我在这里寻找的答案。 我正在使用ajax来检查数据库中是否存在用户名，如果用户存在，则表单中会显示错误。 但是，如果存在该错误，我正在尝试阻止提交表单。 我已经尝试过event.preventDefault（）但是我不确定我是否正确使用它，或者我是否使用它错了。

我的JS代码是：

$(".check").blur(function () { var username = $(".check").val(); $.ajax({ url: "validateUser.php", type: "post", data: "username=" + username }).done(function (result) { if (result == "true") { // CODE TO RUN IF ERROR DOESN'T EXIST } else { // CODE TO RUN IF ERROR DOES EXIST // CREATE THE ERROR MESSAGE AND DISPLAYS IT event.preventDefault(); } }); }); 

Answer 1

对表单提交validation以及模糊。

 function checkUsername(username) { var username = $(".check").val(); return $.ajax({ url: "validateUser.php", type: "post", data: "username=" + username }).then(function (result) { var def = $.Deferred(); if (result == "true") { // CODE TO RUN IF ERROR DOESN'T EXIST def.resolve(); } else { // CODE TO RUN IF ERROR DOES EXIST // CREATE THE ERROR MESSAGE AND DISPLAYS IT def.reject(); } return def.promise(); }); } $(".check").blur(checkUsername); $("#myform").submit(function(e){ var self = this; e.preventDefault(); checkUsername().done(function(){ // username was ok self.submit(); }); }); 

Answer 2

为了防止您的表单提交，您必须在处理程序的event实例上调用preventDefault()来提交表单的JavaScript事件。

Answer 3

你可以这样做：

 $("form").submit(function(){ return !$(this).hasClass("error"); }); $(".check").blur(function () { var username = $(".check").val(); $.ajax({ url: "validateUser.php", type: "post", data: "username=" + username }).done(function (result) { if (result == "true") { $("form").removeClass('error') } else { $("form).addClass("error"); } }); }); 

所以你的ajax会添加一个类错误，如果它有效则删除它。 如果表单已提交，则会在类错误时取消。

Ajax是异步的，因此您无法直接返回它。 因为代码将继续运行而不是等待done函数。

Answer 4

使用return false而不是e.preventDefault() 。

Answer 5

试试这个：

 $(".check").blur(function (event) { // Prevent Default the event here... event.preventDefault(); var username = $(".check").val(); $.ajax({ url: "validateUser.php", type: "post", data: "username=" + username }).done(function (result) { if (result == "true") { // CODE TO RUN IF ERROR DOESN'T EXIST $("form").submit(); } else { // CODE TO RUN IF ERROR DOES EXIST // CREATE THE ERROR MESSAGE AND DISPLAYS IT $(this).focus(); alert('An error occurred!'); } }); }); 

这里有一点：

1. 您甚至没有在函数中添加event ，而是调用了event.preventDefault() 。
2. 如果结果为"true" ，您只需提交表单或运行代码即可。
3. 否则，只需将focus放回文本框并显示警告消息。

Answer 6

根据你的意见，我认为你应该试试这个：

 if (result == "true") { $(this).closest('form').submit(); } else { $(this).closest('form').submit(function(event){ event.preventDefault(); }); }