jQuery ajax：如果ajax驗證失敗，如何銷燬提交？

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，但它不會與表單提交和往常一樣，甚至沒有按警報」 t出現！

我檢查了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工具的易用性。

你可以在這裏看到一個例子 - >http://www.zipstory.com/signup

編碼愉快。