javascript - Implementing Ajax deferred/promise patterns -

i have testcase want send request server every time form field change event occurs. implementation below works expected until submit form , check empty values(this front-end validation carried out, rest done via ajax). if field empty trigger change event validation can carried out on server side.

in example below had set async=>false each trigger work expected. realize not ideal , there better way around using deferred/promise patterns.

i using of pattern .promise , .then think need use .when method unsure how work partially working example.

i little unsure of amount of request's being sent server. viable send many, i.e.: each time event occurs?

please ignore block comments, use them code separation.

(function($){ var registration= {};  /**  *   * @type type **/ registration.fields = {};     /**  *   * @type type **/ registration.options = {     cache       : false,     type        : 'post',     datatype    : 'json',     url         : site_url + '/members/validatefieldonchange',     context     : undefined,     data        : undefined,     async       : false    // todo }; /**  *   * @returns {undefined} **/ registration.init = function(){      //caching     this.form = $('form#form-register');      this.fields = {         username    : this.form.find('#username'),         email       : this.form.find('#email'),         password    : this.form.find('#password'),     };         // register event handlers     this.form.on('change', 'input', $.proxy(this.handleevents, this));     this.form.on('submit', $.proxy(this.handleevents, this)); }; /**  *   * @param {type} event  * @returns {undefined} **/ registration.handleevents = function(event){        var type, target       event.preventdefault();      type   = event.type;     target = event.target;      if(type == 'change'){         return this.handlechangeevent(event.target);     }      return this.handlesubmitevent();       };  /**  *   * @param {type} target  * @returns {undefined} **/ registration.handlechangeevent = function(target){      this.options.context = target;      this.options.data = { field : target.name, value : target.value}      return this.validate(); };  /**  *   * @returns {undefined} **/ registration.handlesubmitevent = function(){      // ugly testcase if values empty     // todo     if($('#username').val() == ''){         $('#username').trigger('change');     }      if($('#email').val() == ''){         $('#email').trigger('change');     }      if($('#password').val() == ''){         $('#password').trigger('change');     }  }; /**  *   * @returns {_l2.registration@call;doajax@call;then} **/ registration.validate = function(){     return this.doajax().then(         $.proxy(this.handleresponse, this),         $.proxy(this.handleerror, this)     ); };  /**  *   * @param {type} response  * @returns {undefined} **/ registration.handleresponse = function(response){      var field = $(this.options.context);      if(response.msg == 'success')     {         field.addclass('valid');     }     else     {         field.val('');         field.attr('placeholder', response.responseerror);         field.addclass('invalid');     }      return; }; /**  *   * @param {type} error  * @returns {undefined} **/ registration.handleerror = function(error){     switch(error.code)     {         case 404:             return console.error('not found');         break;         case 401:             return console.error('un-authorized access!');         break;         case 500:             return console.error('system error!');         break;     } };  /**  *   * @returns {unresolved} **/ registration.doajax = function(){     return $.ajax(this.options).promise(); }  registration.init(); })(jquery);