So here's my problem.
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.
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.
Here's the relevant code:
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);
}
}
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!
checkNameSQL
function be returning something to theaddMethod()
method? Otherwise how does the latter know the result of the SQL query? In any case, since the SQL query is an asynchronous event, returning a value is going to be difficult. This is a question of sychronicity. Have a look into jQuery's deferred objects - that would be the easiest resolution to this.checkNameSQL()
, resolve it with.resolve(true)
or.resolve(false)
, and return a promise. I then, insideaddMethod
, use$.when(checkNameSQL()).done(function(status){nameUnique=status;});
but it still finishes late. Totally stuck.