Question

我在用户的设置区域中有电子邮件字段。当然，所有电子邮件都是独一无二的，因此我需要在提交表单之前检查其他人未使用过的电子邮件。

以下是代码：

var email = $("input#email-id").val();

$("#form-id").submit(function(){
    $.ajax({
        url: "/ajax/email?email=" + email,
        success: function(data){
            if(data != 'ok'){
                alert("Email is used already");
                return false;
            }
        }
    });
});

因此，如果data不是'ok'，则必须销毁提交表单，因为if()会返回false，但它不会，并且表单会照常提交甚至提交警报没有出现！

我检查了ajax答案，它运行正常（如果使用电子邮件，则返回'user_already'）。那我做错了什么？

谢谢！

Answer 1

由于ajax本质上是异步的，所以你无法做到这一点。如果您真的想这样做，可以在成功处理程序中提交表单。试试这个。

function submitHandler(){
    var email = $("input#email-id").val();

    $.ajax({
        url: "/ajax/email?email=" + email,
        success: function(data){
            if(data != 'ok'){
                alert("Email is used already");
                return false;
            }
            else{
               //Once the data is ok you can unbind the submit handler and 
               //then submit the form so that the handler is not called this time
               $("#form-id").unbind('submit').submit();
            } 
        }
    });
    return false;//This will prevent the form to submit
}
$("#form-id").submit(submitHandler);

Answer 2

这是因为检查电子邮件的Ajax请求是异步的。它在提交事件处理程序完成之前不会完成。你必须做这样的事情：

$('#form-id').submit(function() {

    if($(this).data('valid')) {
        //you've already validated, allow the form to submit
        return true;
    } else {
        //send an ajax request and wait for the response to really submit
        $.ajax({
            url: "/ajax/email?email=" + email,
            success: function(data){
                if(data == 'ok') {
                    //submit the form again, but set valid data so you don't do another Ajax request
                    $('#form-id').data('valid', true);
                    $('#form-id').submit();
                } else {
                    alert("Email is used already");
                }
            }
        });
        return false;
    }

    //clear the validation flat
    $(this).data('valid', false);

});

Answer 3

有一个公认的答案，但我想我会分享另一种方法来做到这一点。

您可以使用.trigger()函数的额外参数来首先测试用户的电子邮件，如果它回来可用，则重新触发提交事件，但设置一个标志，不检查用户名：

$("#form-id").submit(function(event, forceSubmit){

    //the normal submit will not have the extra parameter so we need to initialize it to not throw any errors,
    //typeof is great for this since it always returns a string
    if (typeof(forceSubmit) == 'undefined') { forceSubmit = false; }

    //now check if this is a normal submit or flagged to allow submission
    if (forceSubmit === false) {
        var $form = $(this);
        $.ajax({
            url: "/ajax/email?email=" + email,
            success: function(data){
                if(data != 'ok'){
                    alert("Email is used already");
                } else {
                    $form.trigger('submit', true);
                }
            }
        });

        //since this submit event is for checking the username's availability we return false to basically: event.preventDefault(); event.stopPropagation();
        return false;
    }
});

.trigger()：http://api.jquery.com/trigger

Answer 4

如果涉及JSON，则返回的数据位于 data.d 中 - 有关说明，请参阅http://encosia.com/a-breaking-change-between-versions-of-aspnet-ajax/。

Answer 5

在您的代码中，您有两个功能。一个是传递给submit的函数：

$("#form-id").submit(function() {
  // code
});

另一个是传递给AJAX调用的成功处理程序的函数：

success: function(data) {
  // code
}

您正在从第二个函数返回false。这意味着当第一个函数返回时，它不会返回false。但是，只有当第一个函数返回false时，表单提交才会停止。

您应该做的是让传递给submit的函数始终返回false并以编程方式处理提交。

此代码可帮助您实现此目的：

var submitHandler = function() {
  $.ajax({
      url: "/ajax/email?email=" + email,
      success: function(data) {
          if (data != 'ok') {
              alert("Email is used already");
              // no need to do anything here
          } else {
             // success, we should submit the form programmatically
             // first we de-attach the handler, so that submitHandler won't be called again
             // and then we submit
             $("#form-id").unbind('submit').submit();
             // now we reattach the handler, so that submit handler is executed if the user
             // submits the form again
             $("#form-id").submit(submitHandler);
          }
      }
  });

  // always return false, because if validation succeeds, we will submit the
  // form using JavaScript
  return false;
};

$("#form-id").submit(submitHandler);

Answer 6

我已经+1 @ShankarSangoli因为他做对了，但是我觉得它没有100％完成，因为在网络问题或服务器故障时也会出现错误状态。

$('#form-id').submit(function(ev) {
    ev.preventDefault(); // cancels event in jQuery typical fashion
    $.ajax({
        url: "/ajax/email",
        data : { email: $("input#email-id").val()},
        success : function(d) {
            if (d !== 'ok') {
                alert('email in use');
            }
        },
        error : function(a,b,c) {
            // put your error handling here
            alert('a connection error occured');
        }
    }); 
});

还有更好的方法来解决这个问题，因为我已经为jQuery编写了一些非常好的形式插件，这些插件符合HTML5标准，并且易于使用的竞争对手jQuery工具。

你可以在这里看到一个例子 - ＆gt; http://www.zipstory.com/signup

快乐的编码。

jQuery ajax：如果ajax验证失败，如何破坏提交？

6 个答案: