修复延迟的回调，导致在PhoneGap中的jQuery Validation w / jQuery Mobile中的错误错误

问题描述

所以这里是我的问题。

我目前正在使用jQuery Mobile和验证jQuery插件的PhoneGap应用程序进行表单验证。

I'm currently working on a PhoneGap application using jQuery Mobile and the Validation jQuery plugin for form validation.

我试图设置一个自定义规则，以便它检查一个名称是否已经在数据库中，如果是这样，防止提交表单，直到用户选择

I'm trying to set up a custom rule so that it will check to see if a name is already in the database, and if so, prevent the form from being submitted until the user chooses a name that is unique.

问题是我之前遇到过，但还没有设法正确解决。当我调用执行SQL select语句的方法时，成功回调不会完成，直到验证器已经完成并且被抛出false。这意味着如果用户输入唯一的名称，它将显示一个错误，但如果用户强制它重新验证字段，它将是有效的，因为成功回调已经完成。

The problem is one that I've encountered before but have not yet managed to properly solve. When I call the method that executes the SQL select statement, the success callback does not get completed until after the validator has already completed and thrown false. This means that if a user enters a unique name, it will display an error, but if the user forces it to re-validate the fields, it will then be valid because the success callback had, in the meantime, completed.

以下是相关代码：

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之前，它由验证程序返回，导致错误的错误。

I've simplified it where it makes sense, cutting out code not relevant to the question. As you can see, I call the method to check if the name exists, but before the success callback function triggers to set nameUnique to true, it's being returned by the validator, causing a false error.

我应该如何更改我的代码，以防止这种情况发生？我应该遵循什么一般规划做法来规避未来的类似问题？谢谢！

How should I change my code to prevent this from occurring? What general programming practices should I follow to circumvent similar problems in the future? Thanks!

推荐答案

您可以返回 pending code> addMethod（）除了true和false，可用于延迟验证。有关详情，请访问验证库。

You can return pending as a value from the addMethod() besides true and false which can be used to delay the validation. For more info you can check the source of validation library.

尝试这种方式：

$.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);
    }
}

对于演示检查这个小提琴 -

这篇关于修复延迟的回调，导致在PhoneGap中的jQuery Validation w / jQuery Mobile中的错误错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！