修復了一個延遲的回調，導致在jQuery驗證w/jQuery Mobile PhoneGap中的錯誤錯誤

Question

所以這是我的問題。

我目前正在使用jQuery Mobile和Validation jQuery插件進行表單驗證的PhoneGap應用程序。

我想設置一個自定義規則，以便它將檢查名稱是否已經在數據庫中，如果是，則阻止提交表單直到用戶選擇唯一的名稱。

這個問題是我以前遇到過的，但還沒有設法解決。當我調用執行SQL select語句的方法時，直到驗證器完成並拋出false後，成功回調纔會完成。這意味着如果用戶輸入一個唯一的名稱，它將顯示一個錯誤，但是如果用戶強制它重新驗證這些字段，那麼它將是有效的，因爲成功回調在此期間已經完成。

下面是相關代碼：

var nameUnique; 

jQuery.validator.addMethod("nameIsUnique", function(value, element) { 
     checkNameSQL(); 
     return this.optional(element) || nameUnique; 
    }, "This name is already in use. Please choose another."); 

$('#createForm').validate({ 
    rules: { 
     createName: { 
     required: true, 
     nameIsUnique: true 
     }, 
     createDescription: { 
     required: true 
     } 
    }, 
    //snip// 
}); 

function checkNameSQL() 
{ 
var name = document.forms['createForm'].elements['createName'].value; 
if (!(name == null || name == "")) 
{ 
    dbShell.transaction(function(tx) { 
     tx.executeSql("SELECT STATEMENT",[name],function(tx,results){if(results.rows.length==0){nameUnique = true;}},errorHandler) 
    },errorHandler); 
} 
} 

它是有道理的，切割出的問題不相關的代碼，我已經簡化它。正如你所看到的，我調用方法來檢查名稱是否存在，但在成功回調函數觸發器將nameUnique設置爲true之前，它將由驗證器返回，導致錯誤。

我該如何更改我的代碼以防止發生這種情況？我應該遵循什麼樣的通用編程做法來規避將來類似的問題？謝謝！

Answer 1

除了true和false之外，您可以返回pending作爲addMethod()的值，可用於延遲驗證。欲瞭解更多信息，你可以檢查驗證庫source。

試試這個方法：

$.validator.addMethod("nameIsUnique", function(value, element) { 
    var validator = this; 
    var previous = this.previousValue(element); 
    checkNameSQL(value, function(status) { 
     var valid = status === true; 
     if (valid) { 
      var submitted = validator.formSubmitted; 
      validator.prepareElement(element); 
      validator.formSubmitted = submitted; 
      validator.successList.push(element); 
      validator.showErrors(); 
     } else { 
      var errors = {}; 
      var message = status || validator.defaultMessage(element, "remote"); 
      errors[element.name] = previous.message = $.isFunction(message) ? message(value) : message; 
      validator.showErrors(errors); 
     } 
     previous.valid = valid; 
     validator.stopRequest(element, valid); 
    }); 
    return "pending"; 
}, "This name is already in use. Please choose another."); 

function checkNameSQL(name, callback) { 
    if (!(name == null || name == "")) { 
     dbShell.transaction(function(tx) { 
      tx.executeSql("SELECT STATEMENT", [name], function(tx, results) { 
       if (results.rows.length == 0) { 
        nameUnique = true; 
        callback(true); 
       }else{ 
        callback(false); 
       } 
      }, errorHandler) 
     }, errorHandler); 
    } 
} 

對於演示檢查此琴 - http://jsfiddle.net/dhavaln/GqsVt/