Question

Here is another issue I cannot quite believe hasn’t been resolved yet…
I am creating a registration form. Now… I need to do some ajax async validation.
This is what I am doing right now (see code at the bottom).

It’s great, it caches already checked values, it’s async, etc. but:

1. You are never 10000% sure it’s validated before submission. This
   is a huge deal, as I ALSO check things on the server side. But
   still… making this code work “forcing” validation on submission
   turns it into a real monster!

2. It seems like a lot of work for something that everything ought to
   be ready to go

3. (Could be related to 2) I cannot think of a way to make this actually generic. I have another 10 fields which will need similar validation, but all validations differ a little, except the Ajax calls… and I am not cutting and pasting this code 10 times!

Am I missing something really obvious? Any ideas?

define([
'dojo/_base/declare',
'dijit/form/ValidationTextBox',
'dojo/_base/lang',
'app/globals',
], function(
 declare
, ValidationTextBox
, lang
, g
){
return declare('app.ValidationWorkspace', [ ValidationTextBox ], {

 ajaxSaidNo: {},
 ajaxSaidYes: {},
 ajaxRequested: {},

 onChange: function(value){
   this.validate();
 },

 validator: function(value){

   // console.log("Started validation for " + value);
   // Ajax has already said no -- returning false straight away
   if(this.ajaxSaidNo[value] ){
     this.invalidMessage = 'Workspace taken';
     return false;
   }

   // Run the normal field validators -- if they fail,
   // return false
   var validation =  Validators.workspace(value);
   if( ! validation.result){
     this.invalidMessage = validation.message;
     return false;

   // At this point, regexp validators passed and Ajax hasn't said "no".
   } else {
     // console.log("OK, ajasSaidYes for " + value + " is " +  this.ajaxSaidYes[value]); 
     if(! this.ajaxSaidYes[value] ){
       g.stores.workspacesAnon.query({name: value}).then(
         lang.hitch(this, function(res){
           if(res && res.length ){
             this.ajaxSaidNo[value] = true;
             //console.log("Added to Ajaxfailed: " + value);
             this.validate();
           } else {
             //console.log("Added to Ajaxsuccess: " + value);
             this.ajaxSaidYes[value] = true;
             this.validate();
           }
         })
       );    
     }  

     return true;
   }

 },

  invalidMessage: "Workspace name not valid",
  missingMessage: "Workspace name cannot be empty",

});

}
 );

Answer 1

The accepted answer might be the right solution.
However, for non-blocking ajax checks, I ended up writing a simple mixin:

define([
  'dojo/_base/declare',
  'dojo/_base/lang',
  'app/globals',
  ], function(
    declare
  ,lang
  , g
  ){
    return declare(null, {

  ajaxSaidNo: {},
  ajaxSaidYes: {},
  ajaxRequested: {},

  constructor: function(){

    // Declaring object variable in constructor to make sure that
    // they are not class-wide (since they will be in the prototype)
    this.ajaxSaidNo = {};
    this.ajaxSaidYes = {};
    this.ajaxRequested = {};
  },

  // Overloads the validator, adding extra stuff
  ajaxValidate: function(value, options){

    // Set some defaults
    options.ajaxInvalidMessage = options.ajaxInvalidMessage || "Value not allowed";
    options.ajaxStore = options.ajaxStore || null;
    options.ajaxFilterField = options.ajaxFilterField  || 'name';

    // No ajaxStore query available, return true
    if( ! options.ajaxStore ){
      return true;
    }

    // console.log("Started validation for " + value);
    // Ajax has already said no -- returning false straight away
    if(this.ajaxSaidNo[value] ){
      this.invalidMessage = options.ajaxInvalidMessage;
      return false;
    }

    // console.log("OK, ajasSaidYes for " + value + " is " +  this.ajaxSaidYes[value]); 
    if(! this.ajaxSaidYes[value] ){
      var filterObject = {};
      filterObject[options.ajaxFilterField] = value;
      options.ajaxStore.query( filterObject ).then(
        lang.hitch(this, function(res){
          if(res && res.length ){
            this.ajaxSaidNo[value] = true;
            //console.log("Added to Ajaxfailed: " + value);
            this.validate();
          } else {
            //console.log("Added to Ajaxsuccess: " + value);
            this.ajaxSaidYes[value] = true;
            this.validate();
          }
        })
      );    
    }  

    return true;
  }

});
  }
);

Then in the validate function of a textbox (or any field, really), just add the bare minimum to make it work:

    return this.ajaxValidate(value, {
       ajaxInvalidMessage: "Workspace taken",
       ajaxStore: g.stores.workspacesAnon,
       ajaxFilterField: 'name',
    });

That’s it… nice and clear, and you can apply it to any field you like.
(If I receive enough encouraging comments on my approach, I will make this one as the “accepted” answer…)

Merc.